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.
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 using meteor and fullcalendar. I am trying to use the dayClick:function in my template but it is not working.
I would like the dayClick to fire when I click on the day without the use of jQuery. I understand that the way the Template.....events is setup that it will not work. I clearly do not understand some(many)thing(s).
Template:
JS
Template.calendar2.helpers({
calendarOptions: {
// Standard fullcalendar options
height: 700,
hiddenDays: [],
slotDuration: '01:00:00',
minTime: '08:00:00',
maxTime: '19:00:00',
lang: 'en',
// Function providing events reactive computation for fullcalendar plugin
events: function(start, end, timezone, callback) {
//console.log(date);
//console.log(start);
//console.log(end);
//console.log(timezone);
var events = [];
// Get only events from one document of the Calendars collection
// events is a field of the Calendars collection document
var calendar = CalEvents.findOne(
{ "_id":"myCalendarId" },
{ "fields": { 'events': 1 } }
);
// events need to be an array of subDocuments:
// each event field named as fullcalendar Event Object property is automatically used by fullcalendar
if (calendar && calendar.events) {
calendar.events.forEach(function (event) {
eventDetails = {};
for(key in event)
eventDetails[key] = event[key];
events.push(eventDetails);
});
}
callback(events);
},
// Optional: id of the calendar
id: "calendar1",
// Optional: Additional classes to apply to the calendar
addedClasses: "col-md-8",
// Optional: Additional functions to apply after each reactive events computation
autoruns: [
function () {
console.log("user defined autorun function executed!");
}
]
},
});
Here is the event
Template.calendar2.events({
dayClick:function( date, allDay, jsEvent, view ) {
CalEvents.insert({title:'New Event',start:date,end:date});
Session.set('lastMod',new Date());
}
)};
I guess I didnt have a clear enough understanding of how full calendar works. I did not need to a click event to initiate an date/event. fullcalendar already has a way to do that with dayClick: function(); I just needed to place within calendaroptions{};
dayClick: function(date, jsEvent, view) {
CalEvents2.insert({title:'NEW', start:date._d, end:date._d});
Session.set('clickedDate', tempEvent);
IonModal.open('_cal2Modal');
},
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.
I have tried using a Kendo Combobox with a datasource having a structure like:
{text: "12 Angry Men", value:"1"}
and the Kendo Combobox is initialised as:
$("#movies").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
height: 100
})
.closest(".k-widget")
.attr("id", "movies_wrapper")
;
$("#filter").kendoDropDownList({
change: filterTypeOnChanged
});
It is found that for data of about 40,000 objects the combobox takes a 3 sec delay to load and 6-7 secs of delay to open it each time.
I debugged the native code and found out that it does take some time to handle the animation for so many objects to be shown in the popup.
I therefore tried passing animation as false.
But this still did not reduce the delay.Can someone help solve this problem?
I had a similar issue myself with trying to load approx. 20000 items into a combobox.
The way round it is to use server filtering to only pull back a limited number of results. I find 100 is a decent enough number and if the result isn't there then the filter term needs to be a bit more specific to get the eventual correct item.
It obviously means more trips to the server to get the results but I find that is trade off worth taking.
$('#' + fullControlID).kendoComboBox({
dataTextField: 'Text',
dataValueField: 'Value',
filter: "contains",
autoBind: true,
ignoreCase: true,
minLength: 3,
change: function (e) {
$('#' + fullControlID).data("kendoComboBox").dataSource.read();
},
dataSource: {
serverfiltering: true,
serverPaging: true,
pageSize: 100,
transport: {
read:
{
type: "POST",
dataType: "json",
url: transportUrl,
cache: false,
data: {
filterText: function () {
var filter = $('#' + fullControlID).data("kendoComboBox").input.val();
if(filter === '{the place holder text ignore it}')
{
filter = '';
}
return filter;
}
},
}
}
}
});
above is some code that I use to do this with the appropriate controller/action (using mvc) behind the scenes.
if you need more info then let me know.
Note: (fullcontrolID is the id for the control that is the combobox).