CODEWITHSUNDEEP
fullcalendar
James D.
James D.

Reputation: 117

Fullcalendar Start Hour Setting by the Time of Current Hour

I am trying to use Fullcalendar in AngularJS. I somehow implemented the calendar and it works (saves data to the SQL).

However, if I click on the day in the calendar, the modal pops up and the start date shows 00:00:00 in time aspect.

My questions is how can you set the time for the hour of current time?

If it is 9AM currently, then, how can the time in the start initialize the time as 09:00:00 ?

This is what I have for the coding.

select: function(start, end) {

    $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
    $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
    $('#ModalAdd').modal('show');
}

I have a feeling that it would be nice to somehow modify the code below and place it within the above code, but I am stuck on where to put it.

var time = new Time();
var h = date.getHour();

I don't know it the Time() even works (it was Date() from other source).

Please can anyone help me on initializing the hour in the Fullcalendar based on the current hour? I am looking for any advice or even a hint to solve this matter.

Thank you in advance!

Upvotes: 1

Views: 1033

Answers (1)

ADyson
ADyson

Reputation: 61983

You can use momentJS to add the current (local) system time to the selected day:

select: function(start, end) {

    var today = moment();
    start.set({ hours: today.hours(), minute: today.minutes() });

    $('#ModalAdd #start').val(start.format('YYYY-MM-DD HH:mm:ss'));
    $('#ModalAdd #end').val(end.format('YYYY-MM-DD HH:mm:ss'));
    $('#ModalAdd').modal('show');
}

See https://momentjs.com/docs/#/get-set/set/

Also it's worth mentioning that start and end are already moments, so you don't need to wrap them in the moment constructor again as you were doing before.

Another thing to consider if you do this, is whether your calendar has other views available, in particular the agenda-style views, on which selections can be made which would trigger the modal? If so, then you need to ensure that the time-manipulation code above only runs when the view is "month", because the agenda view will, by default, already use the time that the user actually chose on the calendar.

Upvotes: 1

Related Questions