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
});
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 have started looking at the fullCalendar package but am seeing some unusual behavior when I first load.
I have it setup as follows:
<div id='calendar'></div>
<script>
// Create FullCalendar Object
$j('#calendar').fullCalendar({
height: 650,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: businessHours,
selectable: true,
select: function (startDate, endDate) {
AddWorkHours(startDate, endDate);
}
});
</script>
However when I first launch the calendar it appears as follows:
Where some of the properties do not appear to have been fully implemented:
Height seems to be being ignored.
Now Indicator is visible, but is stuck at the first moment of the current day.
Business Hours only seem to show in all-day, none of the times are shown.
The rest of the properties seem to have been picked up.
The strange thing then however is that if I navigate to the previous week (or any other place in fullCalender, it then renders correctly as follows:
Has anyone else experienced this behavior or have any suggestions on where to start looking. I am trying to implement this on quite a large system but am pretty sure I have all my JQuery loading before the fullCalendar.js file.
do you have moment.js loaded before fullcalendar.js?
and check the versions are compatible.
the code snippet you have is working fine, I need to take a look at the businessHours var and AddWorkHours function to confirm that everything is fine.
if you check the example below you will see highlighted area (Monday - Friday start at 10AM to 6PM) that's the business hours in the example.
jQuery(document).ready(function($){
var businessHours = {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
};
$('#calendar').fullCalendar({
height: 666,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: businessHours,
selectable: true,
select: function (startDate, endDate) {
AddWorkHours(startDate, endDate);
}
});
function AddWorkHours(startDate, endDate){
alert('Selected Start Time is: ' + startDate);
alert('Selected End Time is: ' + endDate);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar-container">
<div id="calendar"></div>
</div>
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.
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!
I am using latest version of the fullcalendar for my project. 3.1.0
I noticed that what I am trying to accomplish here actually used to work but then got broken in version 2.. of some kind.
Please see these fiddles for comparison.
Old version:
Fiddle that works
New Version:
Fiddle that doesn't work
Both fiddles above use this type of code to setup the title:
$('#calendar').fullCalendar({
defaultView: 'basicWeek',
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: true,
weekends:false,
Notice that in the working one, title adjusts correctly date wise, where none working one still lists saturday and sunday range
Could you please tell me what the changes are and why it got broken?
I think they were working on the fix, but is there anything I can do right now to fix the code?
Try this:
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultView: 'basicWeek',
weekends: false,
eventAfterAllRender: function(view) {
var firstDate = moment($('th.fc-day-header:first').data("date"));
var lastDate = moment($('th.fc-day-header:last').data("date"));
if (firstDate.month() == lastDate.month()) {
$('.fc-center').find('h2').html(firstDate.format('MMM') + ' ' + firstDate.format('D') + ' - ' + lastDate.format('D') + ', ' + firstDate.format('YYYY'));
} else {
//logic to show title for dates with different months / years
$('.fc-center').find('h2').html('');
}
}
});
Fiddle