How can i get the event end date using eventClick, we already tried to use view.end but it gives different date and the event.end doesn't exist.
we are planning to edit the event using a modal and populate the input box when eventclick.
Thank you
sample code
eventClick: function(event, jsEvent, view){
console.log(moment(event.end).format("MM/DD/YYYY"));
}
the event is working when you view it on the calendar, the start and end date is set.
Related
I am writing a website in html and using full calendar. I got the events to add to the calendar and show.
My question is how do i code the functionality to change the view of the calendar from month to day view of that day I clicked on when I click on a specific date in month view?
I have this code to give the date i clicked on but cant change the view.
dayClick: function(date, jsEvent, view) {
alert('Clicked on: ' + date.format());
},
You almost have it:
$('#calendar').fullCalendar({
dayClick: function(date, jsEvent, view) {
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('changeView', 'agendaDay');
}
});
I'm using JQuery FullCalendar with DatePicker. I'm wondering when you change the date in FullCalendar he update the DatePicker, which event should I use to do this?
I'm assuming that when you click on a day on the calendar you want to change the date of the DatePicker. You could use the dayclick event to accomplish this.
Here is an example:
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
//update the datepicker here
}
});
The date parameter holds a Date object for the current day.
This will change the date of the DatePicker to match the current view of FullCalendar. For example, when the prev, next, or today buttons are clicked.
$('#calendar').fullCalendar({
viewRender: function(view, element){
var currentdate = view.intervalStart;
$('#datepicker').datepicker().datepicker('setDate', new Date(currentdate));
}
});
I am currently using the http://arshaw.com/fullcalendar/ (full calender Plugin) and the qtip2 plugin. I want to create events using the qtip2 popover. and i dont have any idea of how to do so? can anyone please guide me on this?
Bind the option select to a new function youFunction (callback). In this new function you should receive the selected date parameters, then you can manipulate and save the event as you wish.
$('#calendar').fullCalendar({
// put your options and callbacks here
//...
select: yourFunction,
//...
});
function yourFunction(startDate, endDate, allDay) {
//open your popover, manipulate the data and save the event.
}
On page I have fullcalendar, variable which determines how to display now (all events or events with filter), button for changing variable value and function which applies filter.
Variable (true - show all events, false - with filter):
var isShownWithCancelEvents = true;
Button and it's click function:
$('.fc-header-left').append('<span class="fc-button fc-button-show-with-canceled-events fc-state-default"><span class="fc-button-inner"><span id="show_without_canceled_events" class="fc-button-content">Show with filter</span><span class="fc-button-effect"><span></span></span></span>');
$(".fc-button-show-with-canceled-events").click(function() {
isShownWithCancelEvents = !isShownWithCancelEvents;
prepareEvents();
});
Function prepareEvents():
function prepareEvents(){
if (isShownWithCancelEvents) {
$('#calendar').fullCalendar('refetchEvents');
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show with filter");
}
else {
$('#calendar').fullCalendar ( 'removeEvents', filter );
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show all events");
}
}
Filter function:
function filter(event) {
return (event.ec_e_id !== null);
}
Also in fullcalendar I use option:
viewDisplay: function(view) {
prepareEvents();
},
Button is working, problem is with fullcalendar option.
Default view on page is agendaWeek. I open page and click button, variable's value changes to false, filter applies. It's OK. Then I click button "Month" and view changes to month. And I see all events. Then I click button "Week" and view changes to agendaWeek - events are filtered. I click button "Month" again - on this view events are filtered too. So, the problem is when first time changing view to another.
I open page and click button, variable's value changes to false, filter applies. It's OK. Then I navigate left or right (next or previous week), and I see all events. Then I return back, where events were filtered and see all events there.
If I add alert into fullcalendar option
viewDisplay: function(view) {
alert("something");
prepareEvents();
},
everything is OK, and filter works every time.
An issue i faced while using the select was:
When I click on the date in the month view, the function as specified in the select: function(start, end, allDay) {etc code i want to run here } is immediately fired before changing the view.
I am trying to achieve the following:
1) User clicks on a date on the month view
2) user gets sent to the agendaDay view on the date that he clicked via dayclick() and changeView and gotoDate.
3) User uses select to select time slots.
4) fire up the code i want to run.
Any advice is much sppreciated.
Regards,
Han
version 1.4.7 added support for a "View Option Hash" for the selectable option, so something like this:
$('#calendar').fullCalendar({
selectable: {
month: false,
agenda: true
}
});