CODEWITHSUNDEEP
jqueryfullcalendartimepickerjquery-ui-timepicker
Francis Saul
Francis Saul

Reputation: 750

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!

Upvotes: 2

Views: 12421

Answers (2)

Francis Saul
Francis Saul

Reputation: 750

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

Upvotes: 1

Salah Eddine Lahniche
Salah Eddine Lahniche

Reputation: 349

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

Upvotes: 2

Related Questions