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

2
votes

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!

2
jqueryfullcalendartimepickerjquery-ui-timepicker
I am not sure how the jquery timepicker returns values but parseInt might ruin the data – Daffy13
I actually did it but the event doesn't render in the fullcalendar. – Francis Saul
I agree with @Daffy, in start, end variables you should use date as this format for example 2010-01-07 – Salah Eddine Lahniche
@SalahEddineLahniche I already have a jquery datepicker above , that's why I did not use it in the inputs of start time and end time textboxes. – Francis Saul

2 Answers

2
votes

Try to format date as following yyyy-mm-dd then the time picker as following:

$(document).ready(function(){
    //init
    $('#startTime').timepicker({ timeFormat: 'H:i' });
    $('#endTime').timepicker({ timeFormat: 'H:i' });
});

then at start & end variables use:

start: x + "T" + startHour + ":00",
end: y + "T" + endHour + ":00",

And don't forget to remove parseInt from start & end hour because all you need is the formatted text

1
votes

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
    },