locked
Print fullcalendar RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-909867351 posted

    Hi

    I need to create one button (asp.net) to print fullcalendar (https://fullcalendar.io/) with bootstrap4. 

    Any help?

    Thank you

    mario

    Tuesday, September 24, 2019 6:16 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User665608656 posted

    Hi mariolopes,

    mariolopes

    I need to create one button (asp.net) to print fullcalendar (https://fullcalendar.io/) with bootstrap4. 

    To print the fullcalendar with bootstrap, I recommend that you delete the reference to fullcalendar.print.css to ensure the style of the fullcalendar with bootstrap.

    For more details, you could refer to the following code:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/fullcalendar.min.css" rel="stylesheet" /> 
    <script src="../Scripts/jquery-3.2.1.min.js"></script>
    <script src="../Scripts/moment.min.js"></script>
    <script src="../Scripts/fullcalendar.min.js"></script>
    <style type="text/css">
        @media print { 
            .visible-print {
                display: inherit !important;
            }

            .hidden-print {
                display: none !important;
            }
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.printBtn').on('click', function () {
                window.print();
            });
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                defaultDate: '2018-11-16',
                navLinks: true,
                eventLimit: true,
                events: [{
                    title: 'Front-End Conference',
                    start: '2018-11-16',
                    end: '2018-11-18'
                },
                {
                    title: 'Hair stylist with Mike',
                    start: '2018-11-20',
                    allDay: true
                },
                {
                    title: 'Car mechanic',
                    start: '2018-11-14T09:00:00',
                    end: '2018-11-14T11:00:00'
                },
                {
                    title: 'Dinner with Mike',
                    start: '2018-11-21T19:00:00',
                    end: '2018-11-21T22:00:00'
                },
                {
                    title: 'Chillout',
                    start: '2018-11-15',
                    allDay: true
                },
                {
                    title: 'Vacation',
                    start: '2018-11-23',
                    end: '2018-11-29'
                },
                ]
            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="calendar" style="width: 1000px;"></div>
        <button class="printBtn hidden-print">Print</button>
    </form>
</body>
</html>

    Here is the result of this code :

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 25, 2019 5:28 AM