Print fullcalendar RRS feed

  • Question

  • User-909867351 posted


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

    Any help?

    Thank you


    Tuesday, September 24, 2019 6:16 PM


  • User665608656 posted

    Hi 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">
        <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;
        <script type="text/javascript">
            $(function () {
                $('.printBtn').on('click', function () {
                    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'
        <form id="form1" runat="server">
            <div id="calendar" style="width: 1000px;"></div>
            <button class="printBtn hidden-print">Print</button>

    Here is the result of this code :

    Best Regards,


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