How to set start and end time in full calendar for the start and end date

Question

I have designed a calendar which should display the shift start and end date along with the shift timing If an employee is allocated with morning shift from oct 1-oct 7 and if the timing for morning shift is 09:00 -18:00 then the event should be displayed in the calendar from oct 1st to oct 7th for the timing 9-18.Here in my code it created events only based on the dates and it does not considers time

 var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var form = '';
    var today = new Date($.now());

    var calendar = $('#calendar').fullCalendar({
        slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
        minTime: '00:00:00', /* calendar start Timing */
        maxTime: '24:00:00',  /* calendar end Timing */
        defaultView: 'month',  
        handleWindowResize: true,   
        height: $(window).height() - 200,   
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
            // right: ''

        },
        events: [
           {
            title: 'Morning Shift',
            start: new Date('09/25/2018'),
            end: new Date('10/05/2018'),
            className: 'bg-primary'
        },
        {
            title: 'Night Shift',
            start: new Date('09/25/2018'),
            end: new Date('10/05/2018'),
            className: 'bg-primary'
        },
         {
            title: 'Regular Shift',
            start: new Date('09/25/2018'),
            end: new Date('10/05/2018'),
            className: 'bg-primary'
        }
    ],});

"Here in my code it created events only based on the dates"...that's because you only gave it dates, and no times. You have two options: 1) Create a separate event for each day in the desired time period, with the times included as part of the start/end dates. 2) Use the technique shown [here](https://stackoverflow.com/questions/15161654/recurring-events-in-fullcalendar) to allow you to declare a single event which will then be repeatedly rendered at the same start and end time over all the days in the specified date range. — ADyson, Oct 31 '18 at 10:30

score 0 · Answer 1 · answered Nov 01 '18 at 07:37

0

if you want to include time in your full calendar event you need to pass a setting like this

$('#calendar').fullCalendar({
  events: [
    {
      title:  'My Event',
      start:  '2010-01-01T14:30:00',
      allDay: false
    }
    // other events here...
  ],
  timeFormat: 'H(:mm)' // uppercase H for 24-hour clock
});

also you need to enable a boolean value to show a time "displayEventTime" see fullcalendar docs for time format and for displayEvent.

if above is not your requirement. refer Repeat fullcalendar events daily, monthly and yearly

answered Nov 01 '18 at 07:37

Negi Rox

3,828
1
11
18

I've already marked this as a duplicate of a question which has a much neater solution to the recurring events problem - see the comments above. – ADyson Nov 01 '18 at 10:16
what you marked is not exactly same what he need. – Negi Rox Nov 01 '18 at 10:25
Yes it is, he wants to show an event each day within his shift time period showing the times on each day. It meets the requirement exactly. What else did you think the requirement was? – ADyson Nov 01 '18 at 12:24
@NegiRox what is what is similar to what you said. Here in your code it considers as shift starts from 1st oct 14: 30 am to the x date. When i go for date view it marks 24 hours in all the days. but shift will be there only for 8 hours. i want like 8 am to 6 pm shift from 1st oct to 7 th oct. only the given time for those days should be marked and not all 24 hours – Subasri Nov 01 '18 at 12:24
@Subasri read the link I gave then, it will allow you to do exactly that – ADyson Nov 01 '18 at 13:12
@ADyson thanks.Will look at it – Subasri Nov 01 '18 at 14:15

How to set start and end time in full calendar for the start and end date

1 Answers1