I've use FullCalendar with ajax request for 'allDay' events
and set limit of event as '8' per day in month view (eventLimit = 8)
Calendar display 'more' button with number of more events
but when 'more' clicked, it doesn't showing any events on the popup
Result of clicking on 'more' is attached below... (http://i.stack.imgur.com/PJw0e.png)
Please help, thank you very much.
[Edit:1 I tried to change allDay = false, but result is also the same ...]
$('#calendar').fullCalendar({
editable: true,
droppable: true,
dragOpacity: {
agenda: .5
},
selectable: true,
events: {
url: 'xxxx.php',![enter image description here][1]
type: 'POST',
error: function(){
alert('event fetch error');
}
},
eventLimit:{
'agenda': 3, // adjust to 6 only for agendaWeek/agendaDay
'default': true // give the default value to other views
}
}
});
Ok I solved it by myself
The problem cause of define event(s) as 'allDay' with 'end' date.
Then I remove 'end' date from event's data, it's fine.
Related
I'm using fullcalendar. I have a custom view, but I don't want users to be able to select a time range on this view.
selectable: true,
defaultView: 'multiColAgendaDay',
events: '/events.json',
views: {
multiColAgendaDay:
{
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: gon.driver_num,
columnHeaders: gon.drivers_name,
buttonText: 'drivers'
// ,
}
},
I tried to solve this by adding a check in select
select: function (start, end, jsEvent, view) {
if (view.name === 'multiColAgendaDay'){
calendar.fullCalendar('unselect');
alert("You can create event in week and day view.");
return;
}
$.getScript('/events/new', function () {
$('#event_date_range').val(moment(start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(end).format("MM/DD/YYYY HH:mm"))
date_range_picker();
$('.start_hidden').val(moment(start).format('YYYY-MM-DD HH:mm'));
$('.end_hidden').val(moment(end).format('YYYY-MM-DD HH:mm'));
});
calendar.fullCalendar('unselect');
},
I would like to know other approaches. I hope there is a way to set selectable to false in a specific view.
You can add selectable: false to your view definition (the same way you add other properties to it). e.g.
multiColAgendaDay:
{
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: gon.driver_num,
columnHeaders: gon.drivers_name,
buttonText: 'drivers',
selectable: false
}
When you're using this view, this overrides the top-level setting for selectable. See https://fullcalendar.io/docs/v3/view-specific-options#v2 for documentation.
As long as you're using fullCalendar 2.4 or above, this should work.
I'm trying to get a FullCalendar to only allow event Resize if two specific ids match, but I can't get it to work.
Essentially, I'm loading FullCalendar within a component. This component has a unique ID represented as an event on the calendar. Once the calendar loads to the page, how can I make sure to only set editable: true to that specific event? See below in eventRender for my pseudo code of what I wish to achieve
loadDataToCalendar: function(component, salesAppointments, resExceptions) {
let myEventid;
var ele = component.find('calendar').getElement();
$(ele).fullCalendar({
eventResize: function(event) {
component.set("v.startTime", event.start._d);
component.set("v.endTime", event.end._d);
component.set("v.showSaveButton", true)
},
eventRender: function(event) {
if (event.id === myUniqueIdHere) {
event.editable = true // this is what I'm trying to achieve
}
},
header: {
left: 'prev, next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
eventOverlap: false,
defaultView: 'agendaWeek',
editable: false,
eventLimit: true,
eventSources: [salesAppointments, resExceptions],
timezone: 'local',
});
},
So by default, I want editable to be false. When the calendar renders and has a matching ID, I need to set that specific event to editable: true. How would I achieve this? I've tried using eventRender without
success.
You should do the compare on the server side of where you are generating the event.
Fullcalendar (and most all such programs) can't change things 'on the fly' as you are trying to do - you often will have to set things on the server first and these programs can render, etc. as per the settings you give.
So, in your event, you should set editable = true for the one(s) you want. https://fullcalendar.io/docs/event-object
You can't (well, not easily - there might be a very round-about way but I don't think it worthy of trying) do this in the 'render' but is simple if you do the check on the server side.
When I say 'server side', I mean 'the data coming into fullcalendar'. As you have these in "salesAppointments" and "resExceptions", you may be able to manipulate this a bit in javascript - but, again, not in the fullcalendar section - something like:
loadDataToCalendar: function(component, salesAppointments, resExceptions) {
let myEventid;
$(salesAppointments).each(function(event)){
if (event.id === myUniqueIdHere) {
event.editable = true;
}
}
$(resExceptions).each(function(event)){
if (event.id === myUniqueIdHere) {
event.editable = true;
}
}
var ele = component.find('calendar').getElement();
$(ele).fullCalendar({
eventResize: function(event) {
component.set("v.startTime", event.start._d);
component.set("v.endTime", event.end._d);
component.set("v.showSaveButton", true)
},
header: {
left: 'prev, next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
eventOverlap: false,
defaultView: 'agendaWeek',
editable: false,
eventLimit: true,
eventSources: [salesAppointments, resExceptions],
timezone: 'local',
});
},
I am implementing FullCalendar onto my MVC web application and have the basic calendar working. I am now attempting to add adding external events which i have working apart from when the first event is first dragged on, it isnt added into the database. if the event is moved or edited it however is entered.
Is there a way to make the event entered directly into the database when initially dragged in?
This is my current code for adding external events.
addExternalEvent: true,
eventDrop: function (event) {
var data = {
EventID: event.eventID,
Subject: event.title,
Start: event.start.format('DD/MM/YYYY HH:mm A'),
End: event.end != null ? event.end.format('DD/MM/YYYY HH:mm A') : null,
Description: event.description,
ThemeColor: event.color,
IsFullDay: event.allDay,
};
SaveEvent(data);
}
$('#external-events .fc-event').each(function () {
$(this).data('event', {
title: $.trim($(this).text()),
stick: true
});
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
});
Thanks in advance.
I have started using the fullcalendar plugin for a calendar display of mine.
The goal of the calendar is to allow the user to add events labled Accommodation or Canteen.
When my page loads, I use PHP to build an array that gets parsed to the JavaScript that displays the events.
What I would like to do is be able to display the Google Material Design icons with the matching event.
Accommodation will be the hotel icon.
Canteen will be the local dining icon.
Now in Google's documentation it shows that the icons can be applied using the following method:
<i class="material-icons">hotel</i>
However when passing events to the plugin, this does not seem to be possible.
The php where the array gets built:
$events = array();
while (!$result->eof()) {
if ($result->valueof('date_canteen_available') == 't') {
$events[] = array("title" => "Canteen", "start" => $result->valueof('date_date'));
}
if ($result->valueof('date_accommodation_available') == 't') {
$events[] = array("title" => "Accommodation", "start" => $result->valueof('date_date'));
}
Part of my javascript:
<script>
$('#calendarAccomo').fullCalendar({
header: {
},
defaultView: 'month',
editable: true,
selectable: true,
allDaySlot: false,
events: <?php echo json_encode($events) ?>,
</script>
My question is, how can I display the correct icon with each event entry?
You can do this:
$('#calendar').fullCalendar({
events: [{
title: 'Accommodation',
start: '2017-02-01',
description: 'This is a cool event'
}, {
title: 'Canteen',
start: '2017-02-02',
description: 'This is a cool event'
}],
eventRender: function(event, element, view) {
if (event.title == 'Accommodation') {
element.append('<i class="material-icons">hotel</i>');
} else {
element.append('<i class="material-icons">local_dining</i>');
}
}
});
Try the fiddle.
Hello guys I'm using full calendar for my calendar. The problem I'm facing right now is I'm populating all of the events in my calendar. Now for instance if I have 10 events on a day it will all those events rather then showing 4 events and then giving a plus event to see all the other event. I can't understand why am I facing this problem. Please tell me what is it that I'm doing wrong. Here is the code through which I'm populating my event:
viewRender: function (view) {
$.ajax({
type: "POST",
url: base_url +"apps/calendar/getByMonth",
async : false,
dataType: 'html',
data: {'type': $('#formName').val() },
success: function(mark_up){
mark_up = JSON.parse(mark_up);
$.each(mark_up["task"], function() {
this.start = this.end;
});
my_events = mark_up["task"];
console.log(my_events);
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', my_events);
}
});
}
When the calendar then I make a ajax call to get all the events and then assign those events to my_events.
Use below parameter in your fullcalendar configuration
$('#calendar').fullCalendar({
eventLimit: 4, // Here
viewRender: function (view) {
// Your code mentioned in your question.
}
});
This is just an example to place eventLimit.
This works for me.
It's the full calendar default.
see
http://fullcalendar.io/docs/display/eventLimit/
eventLimit 2.1.0 Limits the number of events displayed on a day.
Boolean, Integer. default: false
Usage
$('#calendar').fullCalendar({
eventLimit: true, // for all non-agenda views
views: {
agenda: {
eventLimit: 6 // adjust to 6 only for agendaWeek/agendaDay
}
}
});
Just use it as false.
I don't know which version you'r using, but it's strange that it isn't false as default.