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

Question

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

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?

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!

I am not sure how the jquery timepicker returns values but parseInt might ruin the data — Daffy13, Mar 31 '17 at 12:35
I actually did it but the event doesn't render in the fullcalendar. — Francis Saul, Mar 31 '17 at 12:45
I agree with @Daffy, in start, end variables you should use date as [this format](https://en.wikipedia.org/wiki/ISO_8601) for example `2010-01-07` — Salah Eddine Lahniche, Mar 31 '17 at 13:18
@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, Mar 31 '17 at 13:25

Salah Eddine Lahniche · Answer 1 · 2017-03-31T14:29:45.280

2

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

edited Mar 31 '17 at 14:29

answered Mar 31 '17 at 13:45

Salah Eddine Lahniche

349
2
7

Hi, It doesn't work. this code works but only if I parseInt the hour and minute (hard coded) and not coming from the inputs x = moment(x) .set({ hour: parseInt(_startHour), minute: parseInt(_startMinutes), date: parseInt(_day), month: parseInt(_month), year: parseInt(_year) }) .toDate(); – Francis Saul Mar 31 '17 at 14:07
I just don't know how to supply values for _startHour and _startMinutes from the jquery timepicker input values. – Francis Saul Mar 31 '17 at 14:08
Try to change `hh:mm:ss` with `H:i`, I've tried and it works, the `$('#startTime').val()` returns `20:00` for example so I add to it `:00` for seconds and then I add it to `2017-03-31T` to have the correct date format used in fullCalendar – Salah Eddine Lahniche Mar 31 '17 at 14:43

Francis Saul · Accepted Answer · 2017-04-04T08:36:46.013

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

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

2 Answers2