I am working on Angular full calendar and trying to update the reservation when user drags the event to an other time. But when I log the event it returns me the previous start and end time. How can I get the current start and end time?
<full-calendar
defaultView="dayGridMonth"
[editable]="true"
[eventLimit]="5"
[slotDuration]="'00:15:00'"
[snapDuration]="'00:15:00'"
[nowIndicator]="true"
[slotLabelFormat]="timeFormat"
[eventTimeFormat]="timeFormat"
[minTime]="'08:00:00'"
[maxTime]="'24:00:00'"
[header]="{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth, timeGridWeek, timeGridDay, listWeek'
}"
[plugins]="calendarPlugins"
[events]="calendarEvents"
(eventDragStop)="updateReservation($event)"
></full-calendar>
And this it the updateReservation method:
updateReservation(event) {
console.log(event, event.el.fcSeg.start, moment(event.el.fcSeg.start).format());
}
Hope someone could help me out :)
Related
In a custom view for summer and winter semester i tried to set a 7-month view with 6-month steps on clicking the prev/next buttons. (1 month overlapping)
duration: { month: 7 },
dateIncrement: { month: 6 },
Next button works fine, but clicking the prev button triggers event loading twice.
On the first time the calender steps 6-month backwards the event loads again and shows the previous period.
I removed every part of the code, what could produce this behavior, but could't find out.
I tried to reproduce this without a ajax call, again next works fine and prev not:
Codepen
Prev button shows the previous semester on the first click, but stops then.
Any ideas?
Many thanks for your help.
Found a workaround for the bug, works fine:
https://github.com/fullcalendar/fullcalendar/issues/4678
header: {
left: 'backButton,next today',
center: 'title',
},
customButtons: {
backButton: {
click: function () {
calendar.incrementDate({ month: -6 });
}
}
},
bootstrapFontAwesome: {
backButton: 'fa-chevron-left'
},
I am using fullCalendar package to add calendar in my project. By default the view shows by months and I want to change it to weekly bases.
From fullCalendar documentation, agendaWeekis what I am looking for.
I tried the following (didn't work):
$("#calendar").fullCalendar({
defaultView: 'agendaWeek'
});
When I create button and add the following event to it:
Template.appointments.events({
'click #check': function(e, t) {
e.preventDefault()
// console.log(Requests.find({}).fetch())
$('#calendar').fullCalendar('changeView', 'agendaWeek');
}
});
It works and the calendar changes.
My question is, how can set the calendar view to agendaWeek by default?
It would even be better if there is a way to make it similar to the calendar in their official page were there are three buttons (month, week, and day) buttons to choose from.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay', // gets you the three button tabs that you were looking for, similar to the demo
},
defaultView: 'agendaWeek' // default view is agendaWeek
});
Here is the jsfiddle for it.
I want to show event start time and and end time with title for the all day events in month view.
is there any method or property available in fullcalendar.io which can help me to achieve.
To do this, use the eventRender callback (see its description in docs).
function( event, element, view ) { ... }
You have 2 options to do what you need:
Modify the element that is being passed to the eventRender callback by changing its HTML.
From the docs:
element is a newly created jQuery element that will be used for rendering. It has already been populated with the correct time/title text.
Or, you can construct a custom element that fits your requirements and return it from the callback. Make sure to to return a <td> element for your all-day events:
The function can also return a brand new element that will be used for rendering instead. For all-day background events, you must be sure to return a <td>.
You may use eventRender as below
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
defaultView: 'month',
editable: true,
events: events,
eventRender: function (calEvent, element, view) {
//In my case I've created properties startTimeShort and endTimeShort
element.html("<span>" + calEvent.startTimeShort + "-" + calEvent.endTimeShort + "</span>");
}
});
I have a realtime multi timezone application that uses Signal R, all datetimes are broadcast using UTC and manipulated to the correct Timezone using moment timezone. The reason for this is because if we had many people logged on using different timezones, we would have to broadcast each update to the individuals already displaying the correct date time for that person, as oppopsed to 1 broadcast and manipulated client side. The timezone is stored as a string when the user logs in and is not reliant on the browser.
As i understand it FullCalendar will not manipulate the datetime using Timezone(i could be wrong). I checked out the example on your site and all the dates in the JSON are already converted which is not an option for me.
The route i have taken is to manipulate the dates in the eventRender.
The problem is that when you load for the first time the calendar displays them in UTC, if you change views it corrects it to the right date time. See the below fiddle, it loads as 11am then if you swap views it displays as 2pm which is the desired time. Ive used Istanbul as an example.
http://jsfiddle.net/JGuymer/oa4ahubo/6/
$(document).ready(function() {
function renderCalendar() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
timezone: 'Europe/Istanbul',
eventLimit: true, // allow "more" link when too many events
events: [{"id":1026,"taskTypeId":4,"title":"(New Appointment)","start":"2015-06-11T11:00:00Z","end":"2015-06-11T12:00:00Z","allDay":false,"url":null,"location":"","people":null,"className":"event-appointment"}],
eventRender: function(event, el) {
//console.log(event);
event.start.tz('Europe/Istanbul').format('DD MMM YYYY HH:mm');
event.end.tz('Europe/Istanbul').format('DD MMM YYYY HH:mm');
}
});
}
renderCalendar();
});
Is this the correct way of doing this? or is this a bug?
I have setup a google calendar using the gcal.js from fullcalendar which displays a month view easilty enough.
What I really want to do is display this calendar in a single day or agenda view instead of the default month view but I cannot for the life of me find any reference to whether this is possible.
You need to use the defaultView option and set the value to 'basicDay' or 'agendaDay' as listed in Available Views.
Code should look like:
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, basicWeek, basicDay'
},
defaultView: 'basicDay'
});