Disable Event resizing in Angular-UI calendar / fullcalender - javascript

We don't have any duration for our events that we visualize using angular-ui-calendar, so we don't want the user to do any resizing, while still being able to drag&drop the events to move them to another date and time. Where can I configure this?
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
// here?! resizable: false won't work
$scope.events = [
{
// or here? resizable: false won't do anything
title: "Test", start: new Date(2014, 0, 1, 12, 0), end: new Date(2014, 0, 1, 12, 30), allDay: false}
];
Of course I could just revert the resize in the event handler (eventResize), but I think that results in a bad user experience.
Also: We would like to hide the end date of an event, since we don't have any (skipping the endDate property will just result in a two hour duration, so using half an hour will at least keep the size small)
Thanks!

Depends on your version of fullcalendar. The latest is eventDurationEditable (since 1.6.3).
http://arshaw.com/fullcalendar/docs/event_ui/eventDurationEditable/
Example:
$('#calendar').fullCalendar({
editable: true,
eventDurationEditable: false, ...
Deprecated version
$('#calendar').fullCalendar({
editable: true,
disableResizing: true, ...

Current version of full calendar has depreciated disableResizing: true option.
You could simply alter the code from following:
$('#calendar').fullCalendar({
editable: true,
eventDurationEditable: false, ...
To:
$('#calendar').fullCalendar({
editable: false,

Related

Is it possible to overwrite fullcalendar range filter?

I'm implementing a full calendar IO custom view.
I load the events via an API call, the number of events I get back is correct.
But when calling the "callback(events)", fullcalendar implements a "range" filter on the data.
My problem I need to display all the “current day events” and below all future events of the “current day + 10”. But range filter is applied before rendering the "view", so I can only display a limited set of events and not customize it.
Is it possible to overwrite the default range filter and to implement my own?
If so how and where is the class/function located?
Extra details:
Fullcalendar IO version: 3.4.0
Code implementation:
$('#calendar').fullCalendar({
defaultView: 'cvDay2',
header: {
left: '',
center: 'prev title next',
right: 'cvDay2 customAgendaWeek'
},
views: {
customAgendaWeek: {
eventLimit: 100,
duration: {}
},
cvDay2: {
eventLimit: 100
}
},
displayEventTime: false,
titleFormat: 'D MMMM YYYY',
defaultDate: moment().startOf('isoWeek'),
slotEventOverlap: false,
firstDay: 1,
disableDragging: true,
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: 100, // allow "more" link when too many events
weekNumberCalculation: 'ISO',
events: function (start, end, timezone, callback) {
app.CalendarService.getStoreSpecificCalendar(calendarServiceOptions)
.done(function (events) {
console.log(events); //array of 13 events is returned
callback(events);
}).fail(function () {
window.location.href = errorPageUrl;
}).always(function () {
});
}});

jquery FullCalendar custom recurring events

Im using FullCalendar jquery library for creating events.
The requirement here is to create recurring events every x days.
For example create an event that is recurring on each second Monday (every 14 days in this case).
Currently the library supports weekly or monthly recurring events.
How can I achieve this?
I think #CBroe is correct, you could achive this using your own logic.
To add events to the calendar you must first populate an array of events, this can then be bound to the calendars events property.
For example:
var events = getEvents();
$('#myCalendar').fullCalendar({
themeSystem: 'bootstrap3',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
weekNumbers: true,
weekends: false,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventStartEditable: false,
height: 'auto',
eventLimit: true, // allow "more" link when too many events
events: events,
viewRender: function (view, element) {
events = getEvents();
$('#myCalendar').fullCalendar('removeEvents');
$('#myCalendar').fullCalendar('addEventSource', events);
},
});
function getEvents(){
var events = [];
var arrayOfDates; //Populate dates at intervals of 14 days
$.each(arrayOfDates, function () {
var date = this;
//Create event
events.push({
title: 'myEvent',
start: date,
end: date,
allDay: true,
color: '#228B22',
stick: true
});
});
}
return events;
}
Well something like that anyway.. this should give you a good starting point

allow eventOverlap for background events only in fullcalendar

Is there a way to avoid event overlapping;
like the eventOverlap: false inside the fullcalendar config,
but on other hand allow overlap for background events?
I want to render some events as background events into my calendar, just as info (that there are already some events in other calendars) but allow me to create, move or resize my new event on top.
But all other events are not allowed to overlap inside this calendar.
I just try this, without success:
calendar:{
editable: true,
contentHeight: 'auto',
theme: true,
firstDay: 1,
eventOverlap: false,
nowIndicator: true,
allDaySlot: false,
slotDuration: '01:00:00',
snapDuration: '00:00:01',
axisFormat: 'HH:mm',
timeFormat: 'HH:mm',
timezone: 'local',
views: {
listThreeDay: {
type: 'list',
duration: { days: 3 },
buttonText: 'list 3 day'
},
listOneWeek: {
type: 'list',
duration: { weeks: 1 },
buttonText: 'list week'
}
},
businessHours: {
start: '06:00', // a start time (6am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [ 1, 2, 3, 4, 5 ] // days of week (here monday till friday)
},
events: [
{
start: '00:00:00+02:00',
end: '08:00:00+02:00',
color: 'red',
rendering: 'background',
dow: [1],
overlap: true,
}
],
...
Following picture shows what I need:
background events (the red)
normal events (blue) overlapping background events
normal events (blue) do not overlap on other normal events
You can use quite a simple custom function on the eventOverlap callback to achieve this. Simply test whether the event that is being overlapped onto is a background event or not:
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.rendering == "background";
}
You also don't need to specify overlap: true on any of your individual background events.
A working example can be seen here: http://jsfiddle.net/sbxpv25p/18/
https://fullcalendar.io/docs/event_ui/eventOverlap/ explains about the use of a custom function for this callback.
N.B. You may already realise this, but it's worth pointing out: if you plan to save the newly dragged/resized events back to your database, you'll need to double-check the overlap rules on the server as well, since any rules written in JavaScript can be easily disabled or bypassed by anyone with a knowledge of the browser's developer tools. These kind of front-end rules are useful for user-friendliness only - they can't be 100% relied upon to validate your data.
Extending ADyson answer, on FullCalendar 5 you need to change "rendering" by "display":
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.display == "background";
}

I want to display event dynamically in fullcalendar 3.0.1

below is my code. i don't know why the calendar are working but no event displayed. I very appreciate your help.
var eventSTR = [{start: '2016-11-21',end: '2016-11-23',overlap: false,rendering : 'background', color: '#ff9f89'},];
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month',
},
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: false,
event : eventSTR
});
});
You're 99% there, just missing 2 things
1) you need to set the today variable before you set the document ready function:
var today = new Date();
2) you've misspelled the events property. You have:
event : eventSTR
it should read:
events : eventSTR

Fullcalendar: Resizing not working when time is enabled on start date

I have a json data which contains the start and end date of my event.
$(".full-calendar-demo").fullCalendar({
editable: true,
eventDurationEditable: true,
events:[
{
id: 83,
title: "Conference",
start: '2014-11-12T5:00:00',
end: '2014-11-13T5:00:00',
}];
});
How can I enable the resizing of events. I'm using FullCalendar v2.2.3
how about adding resizable:true

Categories