I'm using FullCalendar 3.2.0. When I go to the agendaDay view and click on a time slot, a new event is created automatically with a 30-minute duration by default. How can I have access to this event from the dayClick callback, so I can change its duration?
I'm implementing a page where you have a form that defines the duration of the event. You put the number of hours the event is going to last in an input and then you click on the agendaView of the calendar to create the event. In the dayClick callback, I get the start of the event and add to it the duration that was put in the input, then I render the event in the calendar. The result is that I get my rendered event overlapped by the automatically created one, like this:
I have to click outside the calendar to make the event disappear. I would like to prevent the automatic creation of the event in the first place or be able to change its duration when it is created and make it permanent, so it doesn't disappear when I click outside of the main calendar frame.
Here's my code:
$('#calendario').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: new Date(),
navLinks: true,
selectable: true,
selectHelper: true,
dayClick: function(day, evto, view) {
var txtDuration = $('#duration');
var hoursOrDays = $('#hoursOrDays');
if (view.name === "agendaDay") {
// Here, is it possible to get a reference to the automatically created event and change its end date,
// instead of creating a new one and rendering it?
createEvent('Available', day, calculateEndDate(day, parseInt(txtDuration.val()), hoursOrDays));
}
},
editable: true,
eventLimit: true
});
function createEvent(text, start, end) {
var calendario = $('#calendario');
var evento = {
title: text,
start: start,
end: end,
durationEditable: false,
resourceEditable: false
};
calendario.fullCalendar('renderEvent', evento);
}
function calculateEndDate(start, duration, hoursOrDays) {
var unit = hoursOrDays === 'D' ? 'days' : 'hours';
return start.clone().add(duration, unit);
}
Thanks for your help!
Related
I want set current date visible first. But it isn't working.
Documentation https://fullcalendar.io/docs/view-object
var calendarAll = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'today',
center: 'prev,title,next',
right: 'month30,dayGridMonth,timeGridWeek'
},
initialView: 'month30',
views: {
month30: {
type: 'dayGridMonth',
buttonText: 'month30',
//activeStart: new Date(), //Not working
visibleRange: function(currentDate) {
var startDate = new Date(currentDate.valueOf());
var endDate = new Date(currentDate.valueOf());
startDate.setDate(startDate.getDate() - 1);
endDate.setDate(endDate.getDate() + 29);
return { start: startDate, end: endDate };
}
}
},
});
How can I fix it? Fullcalendar v5, without jquery.
The "month" view provided by fullCalendar does not have this flexibility - it always starts at the beginning of the month, like a traditional paper calendar.
IMHO it would be confusing to many users if it appeared differently.
Other types of view are more flexible - they will respond to the visibleRange setting if you do not specify the time range in the view name, such as if you specify timeGrid rather than timeGridWeek for example.
Change type: 'dayGridMonth' to type: 'dayGrid'
I've implemented the fullCalendar in week view. I have added few events in it. Now I am trying to duplicate those events in other weeks, on click of some external button. Follow is the screenshot of currently implemented fullcalendar:
As you can see that there is a button of duplicate, on top-right corner of fullcalendar. On click of it I need to get all the event of the week that is being displayed in this week.
Following is how I have initialized the fullcalendar:
$('#calendar').fullCalendar({
header: {
left: options["is_staff"] == true ? 'today prev,next' : '',
center: '',
right: '',
},
firstDay: 0,
editable: true,
selectable: true,
defaultView: 'agendaWeek',
weekNumbers: true,
eventOverlap: false,
events: events_data
})
Following is my script for button click:
$("#dup-week-schedule").click(function(){
var currentWeek = $.fullCalendar.formatDate($('#calendar').fullCalendar('getDate'), "W");
var currentWeekArray = [];
var currentWeekTitleArray = []; $.each($('#calendar').fullCalendar('clientEvents'), function(i,v){
if ((v['start'].isoWeek()) == currentWeek){
currentWeekArray.push(v);
currentWeekTitleArray.push(v['title']);
}
});
}
The issue is according the fullcalendar that is displayed in image, 22/04 should be included in current week. But it is being excluded from current week and the next sunday is being included in current week.
We have need to make the kendo scheduler visible when the create/edit popup is brought up (by double clicking an event already there, or a free spot on the scheduler), so we resize the scheduler and fit the popup off to the right in the space now open. I have it resizing using the open, close, activate, and deactivate events of the window to control when to resize the scheduler.
However, when it resizes, the events stay the same size and don't move while the days in the week and month view squish with the resize, making all the events out of place until the scheduler refreshes. However, when refreshing after resizing the scheduler, the edit/create popup closes, which throws an exception because the scheduler edit event can no longer find components that were defined in the edit html template...
Is there a good way to resize the scheduler and have events follow the resize on edit/create popup open?
Here is are my window event functions for open, activate, close, deactivate as well as the very beginning of my scheduler initialization, which sets the edit window with its options.
function openCreateEditPopup(e){
console.log('opening edit window', e);
console.log($('#scheduler'));
$('#scheduler')[0].style.width = '988px';
e.sender.wrapper[0].style.paddingTop = '0px';
e.sender.wrapper[0].style.left = '';
e.sender.wrapper[0].style.right = '0px';
console.log($('.k-overlay'));
//scheduler.view(scheduler.view().name);
}
function finishOpeningEditPopup(e){
$('.k-overlay')[0].style.display = 'none';
//scheduler.view(scheduler.view().name);
}
function closeCreateEditPopup(e){
$('#scheduler')[0].style.width = '100%';
//scheduler.view(scheduler.view().name);
}
function finishClosingEditPopup(e){
//scheduler.view(scheduler.view().name);
}
function createScheduler(resources, setUp) {
var AgendaDayView = kendo.ui.AgendaView.extend({
endDate: function(){
var date = kendo.ui.AgendaView.fn.startDate.call(this);
//console.log('custom agenda date: ', date);
return date;
},
name: 'Day Agenda'
});
scheduler = $('#scheduler').kendoScheduler({
pdf: {
fileName: 'Current Schedule View.pdf',
proxyTarget: '_blank'
},
date: new Date(),
startTime: new Date(),
showWorkHours: false,
//timezone: "America/Chicago",
editable: {
editRecurringMode: 'occurrence',
move: false,
resize: false,
template: $("#editor_template").html(),
window: {
title: 'Event',
width: 432,
open: openCreateEditPopup,
activate: finishOpeningEditPopup,
close: closeCreateEditPopup,
deactivate: finishClosingEditPopup
}
},
I am new to javascript and web developing.
So, I used the fullcalendar library (https://fullcalendar.io/) to make a calendar view, and I wonder if I am able to customize it myself.
This is my Markup code:
<div id="blueBackground">
<div class="container">
<div id='calendar'></div>
</div>
</div>
So, the "blueBackground" is for changing the entire webpage background to blue colour. The "container" class if for resizing the fullcalendar to a more appropiate view.
This is the Javascript code:
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
The javascript code is straight from the fullcalendar Usage page.(https://fullcalendar.io/docs/usage/)
So, how do I customize it? I am a complete newbie at javascript. I look around on the other questions similar to this but it bears no fruits. I can't make it work.
Thank you in advance.
I am currently also using fullcalendar and here is some of the customization i have made:
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
//Changing the header like this:
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//Lets us edit in the calendar
editable: true,
//When u select some space in the calendar do the following:
select: function(start, end, allDay){
//do something when space selected
},
//When u click on an event in the calendar do the following:
eventClick: function(event, element) {
//do something when event clicked
},
//When u drop an event in the calendar do the following:
eventDrop: function(event, delta, revertFunc) {
//do something when event is dropped at a new location
},
//When u resize an event in the calendar do the following:
eventResize: function(event, delta, revertFunc) {
//do something when event is resized
},
//Add some test events.
events: [
{
title : 'event1',
start : '2016-09-15'
},
{
title : 'event2',
start : '2016-09-15',
end : '2016-09-16'
},
{
title : 'event3',
start : '2016-09-15T12:30:00',
allDay : false // will make the time show
}
]
})
});
In my project I also use PHP and MySQL to store and change the events. Other than that almost all the customization's you can do are listed in the docs.
EDIT #1
How to change the basic color settings etc:
Changing the whole background color:
<div id="calendar" style="background:#de1f1f;"></div>
Changing the event background color (when you drag a new event the background is not blue anymore but red):
$(document).ready(function() {
$('#calendar').fullCalendar({
eventBackgroundColor: "#de1f1f"
});
});
Changing the event color (not blue anymore but red):
$('#calendar').fullCalendar({
events: [
// my event data
],
eventColor: "#de1f1f"
});
Changing the border color for the events:
$('#calendar').fullCalendar({
eventBorderColor: "#de1f1f"
});
Hope that clarified just some of the customization you can do :)
This should be simple... using moment.js with Fullcalendar, I need to get the current time and add two hours to it.
In the select: method (or whatever you call it), I have:
select: function(start, end) {
The 'start' param contains the current time. End appears to contain the same thing. If I click to add an event, it details to current time to current time + 30 minutes. What I need to do is have the ending be current time + 2 hours. I've looked at the various docs and haven't found any references to doing something like that... so I'm blind (likely) or it's missing. Help please? :)
You can clone the start date and add 2 hours
http://jsfiddle.net/0fuhhh7v/1/
var end = start.clone().add(2,'hour');
For the select in fullCalendar
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
defaultDate: '2015-11-01',
selectable: true,
select: function (start, end) {
end = start.clone().add(2, 'hour');
alert('Time block is between ' + start.format() + ' and ' + end.format());
$('#calendar').fullCalendar('unselect');
},
editable: true
});