Search code examples
jqueryfullcalendartimepickerjquery-ui-timepicker

How to set start time and end time in fullcalendar from input textboxes using jquery timepicker


In my modal I have two input textbox startTime and endTime using jquery timepicker

enter image description here

I'm able to stick the event in the right date selected from the jquery ui calendar but How can I get the values from Start Time and End Time then set those values in event of fullcalendar?

enter image description here

I know how to get the values in those input e.g. $('#startTime').val() but stacked in there to set it as the start Time for the fullcalendar.

Below is my code:

  function setTimeValues(x,y)
{
    var startHour = parseInt( $('#startTime').val());
    var endHour = parseInt($('#endTime').val());

    //x = moment(x)
    //            .set({ hour: parseInt(_startHour), minute: parseInt(_startMinutes), date: parseInt(_day), month: parseInt(_month), year: parseInt(_year) }) 
    //            .toDate();

    // y = moment(y)
    //           .set({ hour: parseInt(_endHour), minute: parseInt(_endMinute), date: parseInt(_day), month: parseInt(_month), year: parseInt(_year) })
    //           .toDate();



    $("#calendar").fullCalendar('renderEvent',
    {
        title: $('#CustomerFullName :selected').text(),
        description: $('#description').val(),
        start: x,
        end: y,
        allDay: false
    },

        true)

Thanks!


Solution

  • I finally found a solution using javascript date function instantiate and append the actual value from the input elements. below is the code

        var startHour =  $('#startTime').val();
        var endHour = $('#endTime').val();
    
        var s = new Date("April 9, 2016 " + startHour)
        var e = new Date("April 9, 2016 " + endtHour)
    

    and after that, use the moment js to set date,hour and minutes for both start date and end-date

         x = moment(x)
                    .set({ hour: parseInt(s.getHours() - 8), minute: parseInt(s.getMinutes()), date: parseInt(_day), month: parseInt(_month), year: parseInt(_year) }) 
                    .toDate();
    
         y = moment(y)
                   .set({ hour: parseInt(e.getHours() - 8), minute: parseInt(e.getMinutes()), date: parseInt(_day), month: parseInt(_month), year: parseInt(_year) })
                   .toDate();
    

    As you noticed, I subtract 8 because for some reason the fullcalendar always adds 8 from the initial value of Hour from the input element jquery timepicker so I subtract 8.

    Code for fullcalendar

      $("#calendar").fullCalendar('renderEvent',
        {
            title: $('#CustomerFullName :selected').text(),
            description: $('#description').val(),
            start:  x,
            end: y,
            allDay: false
        },