Print fullcalendar [Answered]RSS

1 reply

Last post Sep 25, 2019 05:28 AM by Yongqing Yu

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
mariolopes
Member

423 Points

970 Posts

Print fullcalendar

Sep 24, 2019 06:16 PM|mariolopes|LINK

Hi

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

Any help?

Thank you

mario

Mario Lopes
https://programamos.pt

Yongqing Yu

Contributor

3660 Points

1042 Posts

Re: Print fullcalendar

Sep 25, 2019 05:28 AM|Yongqing Yu|LINK

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.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›