Multiple calendars

tom · Post by **tom** » Fri Feb 23, 2024 3:56 am

Hello,
I want to use multiple calendar reports in my project. I control the settings in Page_Head event. How can I adjust the settings per calendar? Now these settings apply to every calendar.

my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script>
    var currentDayOfWeek = moment().day();
    ew.calendarOptions.fullCalendarOptions.firstDay = currentDayOfWeek;
    //ew.calendarOptions.fullCalendarOptions.firstDay = 1; // 0 = Sunday, 1 = Monday
    ew.calendarOptions.fullCalendarOptions.initialView = 'timeGridWeek'; //zet default op weekzicht
    ew.calendarOptions.fullCalendarOptions.nowIndicator = true; 
    ew.calendarOptions.fullCalendarOptions.height = 1000;
    ew.calendarOptions.fullCalendarOptions.contentHeight = 1000;
    ew.calendarOptions.fullCalendarOptions.timeZone = 'Europe/Brussels'; 
    ew.calendarOptions.fullCalendarOptions.businessHours = [ // specify an array instead
                                                            {
                                                                daysOfWeek: [ 1, 2, 4, 5 ], 
                                                                startTime: '08:30', 
                                                                endTime: '16:30' 
                                                            },
                                                            {
                                                                daysOfWeek: [ 3 ], 
                                                                startTime: '8:30',
                                                                endTime: '12:00' 
                                                            }
                                                            ];

 
</script>

<style>
  /* Maandag */
  .fc-day-mon .fc-col-header-cell-cushion {
    background-color: #D5F5E3; /* Lichtgroen voor maandag */
    
  }

  /* Dinsdag */
  .fc-day-tue .fc-col-header-cell-cushion {
    background-color: #82E0AA; /* Iets donkerder groen voor dinsdag */
  }

  /* Woensdag */
  .fc-day-wed .fc-col-header-cell-cushion {
    background-color: #2ECC71; /* Nog iets donkerder groen voor woensdag */
  }

  /* Donderdag */
  .fc-day-thu .fc-col-header-cell-cushion {
    background-color: #1D8348; /* Nog iets donkerder groen voor donderdag */
  }

  /* Vrijdag */
  .fc-day-fri .fc-col-header-cell-cushion {
    background-color: #186A3B; /* Donkergroen voor vrijdag */
  }

  /* Weekend (zaterdag en zondag) */
  .fc-day-sat .fc-col-header-cell-cushion,
  .fc-day-sun .fc-col-header-cell-cushion {
    background-color: none; /* Geen kleur in het weekend */
  }
</style>

thank you in advance

gessiel · Post by **gessiel** » Sat Feb 24, 2024 1:55 am

To adjust settings per calendar using Jsuites resources, you can follow a similar approach to what we discussed earlier, but using the components provided by Jsuites such as tables and date inputs. However, Jsuites does not provide a specific calendar component like FullCalendar. Therefore, you will need to adapt your solution to use Jsuites' available components.

Here's a simplified example of how you can use Jsuites resources to create and configure multiple "calendars" using date inputs:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Calendar Reports with Jsuites</title>
    <!-- Include Jsuites CSS and JavaScript files -->
    <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
    <script src="https://jsuites.net/v4/jsuites.js"></script>
</head>
<body>
    <!-- Here you can create different containers for each "calendar" -->
    <div id="calendar1"></div>
    <div id="calendar2"></div>

    <script>
        // Default settings
        var defaultCalendarOptions = {
            firstDayOfWeek: new Date().getDay(), // Get the current day of the week
            timeFormat: 'HH:mm',
            dateFormat: 'yyyy-MM-dd'
        };

        // Specific settings for each "calendar"
        var calendar1Options = Object.assign({}, defaultCalendarOptions, {
            // Override settings as needed for the first "calendar"
            // For example:
            // backgroundColor: 'red',
        });

        var calendar2Options = Object.assign({}, defaultCalendarOptions, {
            // Override settings as needed for the second "calendar"
            // For example:
            // backgroundColor: 'blue',
        });

        // Initialize Jsuites date inputs
        var calendar1Input = jSuites.calendar(document.getElementById('calendar1'), calendar1Options);
        var calendar2Input = jSuites.calendar(document.getElementById('calendar2'), calendar2Options);
    </script>
</body>
</html>

arbei · Post by **arbei** » Sat Feb 24, 2024 10:23 am

tom wrote:

I want to use multiple calendar reports in my project. I control the settings in Page_Head event. How can I adjust the settings per calendar?

You may put your code for ew.calendarOptions.fullCalendarOptions in that Calendar report only by Client Script.