locked
Print fullcalendar RRS feed

  • Question

  • 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

  • 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