2

Using fullcalendar scheduler JQuery plugin I would like to have two time periods morning (am) and afternoon (pm) with business hours being 08:00 to 18:00 when you press the 5-day button.

I have downloaded fullcalendar-scheduler-4.2.0 and modified background-events.html by tweaking the JQuery code.

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'resourceTimeline' ],
      now: '2019-06-03',
      slotDuration: '04:00:00',
      businessHours: {
    // days of week. an array of zero-based day of week integers (0=Sunday)
    daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Friday

    startTime: '08:00', // a start time (10am in this example)
    endTime: '18:00', // an end time (6pm in this example)
    },
      minTime: "08:00:00",
      maxTime: "18:00:00",
      editable: true, // enable draggable events
      aspectRatio: 1.8,
      scrollTime: '00:00', // undo default 6am scrollTime
      header: {
        left: 'today prev,next',
        center: 'title',
        right: 'resourceTimelineDay,resourceTimelineFiveDays,timeGridWeek,dayGridMonth'
      },
      defaultView: 'resourceTimelineDay',
      views: {
        resourceTimelineFiveDays: {
          type: 'resourceTimeline',
          duration: { days: 5 },
          buttonText: '5 days'
        }
      },
      resourceLabelText: 'Rooms',
      resources: [
        { id: 'a', title: 'Auditorium A' },
        { id: 'b', title: 'Auditorium B', eventColor: 'green' },
        { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
        { id: 'd', title: 'Auditorium D', children: [
          { id: 'd1', title: 'Room D1' },
          { id: 'd2', title: 'Room D2' }
        ] },
        { id: 'e', title: 'Auditorium E' },
        { id: 'f', title: 'Auditorium F', eventColor: 'red' },
        { id: 'g', title: 'Auditorium G' },
        { id: 'h', title: 'Auditorium H' },
        { id: 'i', title: 'Auditorium I' },
        { id: 'j', title: 'Auditorium J' },
        { id: 'k', title: 'Auditorium K' },
        { id: 'l', title: 'Auditorium L' },
        { id: 'm', title: 'Auditorium M' },
        { id: 'n', title: 'Auditorium N' },
        { id: 'o', title: 'Auditorium O' },
        { id: 'p', title: 'Auditorium P' },
        { id: 'q', title: 'Auditorium Q' },
        { id: 'r', title: 'Auditorium R' },
        { id: 's', title: 'Auditorium S' },
        { id: 't', title: 'Auditorium T' },
        { id: 'u', title: 'Auditorium U' },
        { id: 'v', title: 'Auditorium V' },
        { id: 'w', title: 'Auditorium W' },
        { id: 'x', title: 'Auditorium X' },
        { id: 'y', title: 'Auditorium Y' },
        { id: 'z', title: 'Auditorium Z' }
      ],
      events: [

        // background event, associated with a resource
        { id: 'bg1', resourceId: 'b', rendering: 'background', start: '2019-06-07T01:00:00', end: '2019-06-07T04:00:00' },

        // background event, NOT associated with a resource
        { id: 'bg2', rendering: 'background', start: '2019-06-07T05:00:00', end: '2019-06-07T08:00:00' },

        // normal events...
        { id: '1', resourceId: 'b', start: '2019-06-07T02:00:00', end: '2019-06-07T07:00:00', title: 'event 1' },
        { id: '2', resourceId: 'c', start: '2019-06-07T05:00:00', end: '2019-06-07T22:00:00', title: 'event 2' },
        { id: '3', resourceId: 'd', start: '2019-06-06', end: '2019-06-09', title: 'event 3' },
        { id: '4', resourceId: 'e', start: '2019-06-07T03:00:00', end: '2019-06-07T08:00:00', title: 'event 4' },
        { id: '5', resourceId: 'f', start: '2019-06-07T00:30:00', end: '2019-06-07T02:30:00', title: 'event 5' }
      ]
    });

    calendar.render();
  });

I am getting 4 hours intervals, but can anyone improve it to just show Morning and Afternoon when you press the 5-Day button?

ADyson
  • 57,178
  • 14
  • 51
  • 63
Gatekeeper
  • 29
  • 2
  • At what time do you consider it to be the start of "afternoon"? Midday, I guess? Or maybe 1pm? Is there a lunch break in the middle? Lunch break is problematic because fullCalendar unfortunately cannot put a gap in the middle of the timeline, so you'd probably just need to put in a background event for that time period, or use the businessHours feature to block out that time during the day. – ADyson Aug 07 '19 at 08:53
  • Also, it's not precisely clear what the exact requirement is, but if you wanted to create just two slots in the entire day, one for morning and one for afternoon, then due to the way the grid is created, the two slots would have to be of equal duration. As it stands you potentially don't have that - 8am-12pm is 4 hours, while 12pm-6pm is six hours (or 1pm-6pm is 5 hours). fullCalendar cannot create slots of uneven duration. (8am-1pm and 1pm-6pm would be 5 hours each though...which is why I'm asking how precisely how you define "morning" and "afternoon" in this scenario) – ADyson Aug 07 '19 at 08:56
  • If you're unable to have slots with even durations, then the next best thing is simply to use the regular grid, block out any lunch break if required (see above), and then add some guidance text on the page somewhere to tell the user they can select either morning or afternoon, and then have some custom code to run when the user makes a selection, which ensures that the event created has a start time and a duration which is acceptable according to your business rules, then the user cannot create the wrong size event. – ADyson Aug 07 '19 at 08:58
  • Those are my general pieces of advice,but I cannot give you a definitive answer because of the missing piece of information (regarding morning/afternoon). – ADyson Aug 07 '19 at 08:58
  • I think at the moment it would be OK to have 2 even duration's. So If I set the slotDuration: '05:00:00', I get 8am and 1pm how would I change it to Morning / Afternoon as the column labels? – Gatekeeper Aug 07 '19 at 12:54
  • https://fullcalendar.io/docs/slotLabelFormat shows you what control you have over the display of the labels. So unfortunately, based on that, I don't think you can achieve it. But hopefully it's clear enough to the users what it implies. – ADyson Aug 07 '19 at 12:58

0 Answers0