I have a JS Fiddle here that will show event limit links when there is more then 1 event for a day. I'm trying to modify the .min file so that the limit link shows up when I have just 1 event on that day.
If I set the eventLimit value to 0, I still see a event in the day cell.
There is a line in the .min file that says
eventLimit:!1
and I tried setting the value to 0 but it didn't change the event in the day cell to an event link like I want.
Can anyone help with modifying the .min file to show event limit links for just 1 event per day, instead of the normal event within the cell?
Here is some code.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
//defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: false,
height: 174,
eventLimit: 0,
eventLimitText: function(numEvents) {
return numEvents;
},
events: [{
title: 'Event',
start: '2017-09-18'
} //,
//{
//title: 'Event',
//start: '2017-09-18'
//}
]
});
});
<script src="https://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.js"></script>
<div id='calendar'></div>
Related
I need to display all the events of the year starting by the current date, so essentially from March to December, I tried setting up the property visibleRange as follows:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay'
},
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listWeek',
navLinks: true,
editable: true,
eventLimit: true,
events: <?= json_encode($events) ?>,
visibleRange: {
start: '2020-03-01',
end: '2020-12-31'
}
});
calendar.render();
});
the problem's that I get only the month of March is there a way to achieve this?
I get only the month of March
Actually, according to your code, what you will get is only a single week, or a single day. You cannot even show a whole month based on what you have written.
The issue with your attempt though is a simple logical one. You are defined views as listWeek and listDay. The names in these fix a period of time - "week" and "day" which the views will cover. This fixed period takes priority over any visibleRange setting.
If you want your view to take account of the visibleRange, then you must just specify the view name, without a fixed time period in its name:
header: {
left: 'prev,next today',
center: 'title',
right: 'list'
},
defaultView: 'list',
The above however will restrict you to only the exact time period specified. You cannot move to another year. To make this dynamic, you can use a function to calculate the visible range every time the view needs changing:
visibleRange: function(currentDate) {
var yr = currentDate.getFullYear();
return {
start: yr + '-03-01',
end: yr + '-12-31'
}
},
dateIncrement: { "years": 1}
Demo: https://codepen.io/ADyson82/pen/XWbgyGZ
P.S. Specifying a view name without a time period is demonstrated in the visibleRange documentation already.
I'm using FullCalendar.js to show tasks entered by users. For this I have created a pop up to take Event basic details and details about recurrence. An event can recur daily, weekly, 28 day, 31 day , 30 day cycles. I have been able to render events for daily and weekly cases but I cant think about how to render events occurrences with 28/30/31 days between them.
My code for calendar is as follows:
$('#calendar').fullCalendar({
//height: 420,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment(),
defaultView: 'month',
eventRender: function (event, element, view) {
console.log(event.start.format());
if (event.ranges == undefined)
return true;
else {
return (event.ranges.filter(function (range) {
if (range.end == undefined)//Check if only start is given
return (event.end.isAfter(range.start))
else
return (event.start.isBefore(range.end) &&//If both start and end date is given
event.end.isAfter(range.start));
}).length) > 0;
}
},
events: function (start, end, timezone, callback) {
var events = getEvents(start, end); //This should be a JSON request
callback(events);
},
eventClick: function (calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
//$('#btnOpenPopUp').click();
}
});
and json for events is like so:
{
title: "My repeating event",
id: 1,
start: '10:00', // a start time (10am in this example)
end: '14:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5], // Repeat monday and thursday
ranges: [{
start: moment().startOf('month').subtract(1, 'month'),
end: moment().startOf('month').subtract(1, 'month').add(7, 'd'),
}, {
start: moment('2016-12-15', 'YYYY-MM-DD'), //all of february
//end: moment('2016-11-01', 'YYYY-MM-DD').endOf('month'),
}
I need help to render tasks that occur after every 28 days. Any suggestions?
Maybe you could use later.js project (http://bunkat.github.io/later/index.html) to calculate the occurrences of the tasks. This code sample will produce the all occurrences between 2 dates for every 28 days:
<html>
<head>
<script src="moment.js" type="text/javascript"></script>
<script src="moment-recur-min.js" type="text/javascript"></script>
<script type="text/javascript">
var recurrence = moment().recur("2016-12-06", "2017-12-06").every(28).days();
var allDates = recurrence.all("L");
console.log(allDates);
</script>
</head>
<body>
test
</body>
</html>
I am currently doing some repeating event of fullCalendar in my code. However when switching to next/prev month, my event getting bug or disappear. I know that stick is needed but where should I put it when my code is like this?
var repeatingEvents = [{
title: sub[x],
start: tmefrm[x],
end: tmeto[x],
dow: [har[x]],
ranges: [{
start: moment(dtefrm[x]),
end: moment(dteto[x]),
}],
color: 'green',
}];
var getEvents = function( start, end ){
return repeatingEvents;
}
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
defaultView: 'month',
eventRender: function(event, element, view){
//console.log(event.start.format());
return (event.ranges.filter(function(range){
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length)>0;
},
events: function( start, end, timezone, callback ){
var events = getEvents(start,end); //this should be a JSON request
callback(events);
},
});
I read the docs which it says that event must be an Event Object with a title and start at the very least.
Unless my code is like this it will be easy.
var myCalendar = $('#calendar');
myCalendar.fullCalendar();
var myEvent = {
title: sub[x],
color: 'green',
start: tmefrm[x],
end: tmeto[x],
dow: [har[x]],
ranges: [{
start: new Date(dtefrm[x]),
end: new Date(dteto[x]),
}],
}
myCalendar.fullCalendar('renderEvent', myEvent, [ stick= true]);
What I do ? Is I want to use repeating event, and so far this code make me go far from previous progress but I'm not sure where to put this stick.
Any help would be great :)
It's simple!
myCalendar.fullCalendar('renderEvent', myEvent, true);
I am trying to re-size events functionality of full calendar. I am able to re-size all day events but i am unable to re-size events having end time and allDay false.
following are my events :
$scope.events = [
{id: 999,title: 'Full Day Event',start: new Date(y, m, d - 3, 16, 0),allDay: true},
{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
];
and this is my calendar config:
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
}
;
you can find the plunk here : plunker
please help
Thank you
UI Calendar is using FullCalendar behind the hood. The latter does not seems to have such functionnality. If an event is set as allDay: false it can only be resized in week mode. Here is a link to the related issue on Github https://github.com/angular-ui/ui-calendar/issues/207
I'm using FullCalendar to display events entered by users. As such, I can't control when they are scheduled for.
Strangely, someone has scheduled an event for 11:59pm, and it is basically invisible on FullCalendar's agenda view.
Here is a JSFiddle for the scenario I'm describing. The JS is copied below:
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: false,
contentHeight: 300,
defaultView: 'agendaDay',
scrollTime: '24:00:00',
allDaySlot: false,
slotDuration: '00:15:00',
slotEventOverlap: false,
forceEventDuration: true,
defaultTimedEventDuration: '00:30:00',
displayEventEnd: false,
editable: false,
events: [{
title: 'Earlier (visible) Event',
start: new Date(y, m, d, 22, 00)
}, {
title: 'Late (hard to see) Event',
start: new Date(y, m, d, 23, 59)
}]
});
});
As you'll see on JSFiddle, the "Late (hard to see) Event" renders just two pixels tall at the bottom of the calendar, which is unusable. Is there a solution for this? Maybe some way to view the day through 1am the next morning, for instance?
Add maxTime: "24:59:59". That will extend the agenda view beyond midnight making your event visible.
Here's the jsFiddle: http://jsfiddle.net/0tm5cgjb/2/