I try to make slotMinTime and slotMaxTime on my Fullcalendar v5 but nothing is displayed. My Fullcalendar already start to 00:00:00 (default).
I try to follow this https://fullcalendar.io/docs/slotMinTime but I can not
document.addEventListener('DOMContentLoaded', () => {
var calendarEl = document.getElementById('calendar-holder');
var calendar = new FullCalendar.Calendar(calendarEl, {
dateClick: function(info) {
window.location.href = "http://127.0.0.1:8000/booking/new/" + info.dateStr;
},
validRange: {
start: new Date(),
end: '2022-06-01'
},
defaultView: 'timeGridWeek',
slotMinTime: "07:00",
allDaySlot: false,
editable: true,
duration: '01:00',
eventSources: [
{
url: "{{ path('fc_load_events') }}",
method: "POST",
extraParams: {
filters: JSON.stringify({})
},
failure: () => {
// alert("There was an error while fetching FullCalendar!");
},
},
],
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek',
},
buttonText: {
timeGridWeek:'semaine',
today:'aujourd\'hui'
},
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ], // https://fullcalendar.io/docs/plugin-index
timeZone: 'Europe/Paris',
locale: 'fr',
eventDrop: function(drop) {
window.location.href = "http://127.0.0.1:8000" + drop.event.url + "/edit/" + drop.event._instance.range.start + "/" + drop.event._instance.range.end;
},
});
calendar.render();
});
Your problem is that you are using FullCalendar v4, not v5
Change your original code to from slotMinTime to minTime and slotMaxTime to maxTime and it'll work!
Continue using your v4 files, and use
slotMinTime: "07:00",
slotMaxTime: "18:00",
or, upgrade your JS File references to v5, and use
slotMinTime: "07:00",
slotMaxTime: "18:00",
A better way to use minTime for your method is
scrollTime: '08:00'
This way you don't lose all of the before time.
Related
I need to work with extendedProps, but when i try to show info.event.extendedProps.description in timeGridWeek or timeGridDay it doesn't (it say "undefined"), only in dayGridMonth. I have read the docs, but i don't know how to show these non-standard properties.
The events are displayed correctly.
(Sorry for my poor english)
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'interaction', 'bootstrap', 'timeGrid', 'rrule' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth'
},
titleFormat: {
year: 'numeric',
month: 'long',
day: '2-digit'
},
defaultView: 'timeGridWeek',
themeSystem: 'bootstrap',
selectable: true,
editable: true,
navLinks: true,
weekNumbers: true,
nowIndicator: true,
locale: 'es',
minTime: '08:00:00',
maxTime: '22:00:00',
weekends: false,
eventOrder : 'color',
eventSources: [
'carga_citas.php',
'carga_sesiones.php'
],
eventClick: function(info) {
alert(info.event.extendedProps.description);
}
});
calendar.render();
});
</script>
Thanks for your replies.
//example data for events
[
{
"jobId": 0,
"eventId": 79,
"title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>asfdasfsd<\/span>",
"start": "\/Date(1533542400000)\/",
"end": "\/Date(1533551400000)\/",
"color": "#FFCC00"
},
{
"jobId": 0,
"eventId": 80,
"title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>sfsdgs<\/span>",
"start": "\/Date(1533637800000)\/",
"end": "\/Date(1533646800000)\/",
"color": "#FFCC00"
},
{
"jobId": 0,
"eventId": 81,
"title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>dfdf s ddfsda ds fds 2222<\/span>",
"start": "\/Date(1533722400000)\/",
"end": "\/Date(1533727800000)\/",
"color": "#FFCC00"
},
{
"jobId": 0,
"eventId": 84,
"title": "<b>2018-07-31 00029 Markosy Postal S.A.<\/b><br><span class='eventComment'>gdgdfgsd<\/span>",
"start": "\/Date(1533808800000)\/",
"end": "\/Date(1533812400000)\/",
"color": "#FFCC00"
}
]
$('#calendar').fullCalendar({
locale: 'pl',
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listWeek,year'
},
height: 'auto',
footer: false,
weekends: false,
slotEventOverlap: false,
timezone: 'local',
editable: true,
selectable: true,
events: {
url: '#Url.Action("GetGraphicCalendarEvents", "Schedule")',
textColor: 'black'
},
eventRender: function (event, element, view) {
var title = element.find('.fc-title, .fc-list-item-title');
title.html(title.text());
},
eventDrop: function (event) {
updateEventDate(event);
},
eventResize: function (event) {
updateEventDate(event);
},
select: function (startDate, endDate) {
$.ajax({
url: "#Url.Action("GraphicCalendarAddView", "Schedule")",
type: "post",
data: {
orderId: $("#OrderId").val(),
start: startDate.format("YYYY-MM-DD HH:mm:ss"),
end: endDate.format("YYYY-MM-DD HH:mm:ss")
},
success: function (result) {
if (result.hasOwnProperty("Success") && !result.Success) {
//error
} else {
//success
}
},
error: function (jqXHR, status, err) {
//error
}
});
},
eventClick: function (event) {
updateEventView(event);
}
});
I have a problem with FullCalendar https://fullcalendar.io/docs, I add some screenshot to explain my problem, When i click the button to show my calendar, but I only see not properly loaded events in calendar and when I click on any buttons of drag this thin strips it get fixed and calendar show everything properly.
I found the solution , the modal is not rendered, when the calendar is being rendered, I must add some delay.
example code: https://codepen.io/anon/pen/WKPyEN?editors=0010
$(function() {
$(".graphicPlanninngLetter").on("click", function() {
openCalendarWithView("GraphicPlanning");
});
function openCalendarWithView(action) {
showPopup("Test", "<div id='calendar'></div>");
setTimeout(function() {
$('#calendar').fullCalendar({
locale: 'pl',
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listWeek,year'
},
allDaySlot: false,
height: 'auto',
footer: false,
weekends: false,
slotEventOverlap: false,
timezone: 'local',
editable: true,
selectable: true,
events: 'https://fullcalendar.io/demo-events.json',
eventRender: function (event, element, view) {
var title = element.find('.fc-title, .fc-list-item-title');
title.html(title.text());
},
});
}, 300)
}
function showPopup(title, content, button, selector) {
if (selector == undefined)
selector = "#popup";
$(selector + " .popupTitle").html(title);
$(selector + " .popupBody").html(content);
$(selector + " .popupButtons .additionalButtons").empty().append(button);
$(selector).modal("show");
}
});
I'm implementing a fullcalendar in a project using which users can select future dates.
Is there a way to unselect the selected days?
I tried giving $("#calendar").fullCalendar("unselect"); but it didn't work.
FIDDLE
var today = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar({
defaultDate: today,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultView: 'month',
events: [],
selectable: true,
select: function(start, end, jsEvent, view) {
if (moment().diff(start, 'days') > 0) {
$('#calendar').fullCalendar('unselect');
// or display some sort of alert
return false;
}
var date = $('#calendar').fullCalendar('getDate');
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}, ]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return !event.block;
}
});
function eventSource(){
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}, ]);
}
var today = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar({
defaultDate: today,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultView: 'month',
events: [],
selectable: true,
select: function(start, end, jsEvent, view) {
if (moment().diff(start, 'days') > 0) {
$('#calendar').fullCalendar('unselect');
// or display some sort of alert
return false;
}
eventSource();
var date = $('#calendar').fullCalendar('getDate');
},
selectOverlap: function(event) {
return !event.block;
}
});
The calendar still loads, however it just spits out an error as soon as you attempt to click or drag on something:
Uncaught TypeError: Cannot set property 'isAnimating' of undefined
I've initialized the calendar using the following code, the calendar loads, with some issues:
'use strict';
import React from 'react/addons';
React.initializeTouchEvents(true);
require("font-awesome-webpack");
//Calendar css
require('styles/normalize.css');
require('styles/main.css');
require('../../../../bower_components/fullcalendar/dist/fullcalendar.css');
require('../../../../bower_components/fullcalendar/dist/fullcalendar.print.css');
var $ = require('../../../../bower_components/jquery/dist/jquery');
//Calendar js
require('../../../../bower_components/fullcalendar/dist/fullcalendar');
const DashboardHandler = React.createClass({
componentDidMount: function(){
console.log('clicked');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-02-01'
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-16T16:00:00'
},
{
title: 'Conference',
start: '2015-02-11',
end: '2015-02-13'
},
{
title: 'Meeting',
start: '2015-02-12T10:30:00',
end: '2015-02-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-02-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-02-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-02-28'
}
]
});
},
render: function() {
console.log("RENDER")
return (
<div className='client-dashboard'>
<div id='calendar'></div>
</div>
);
}
});
export default DashboardHandler;
I have a webpack config file that looks like:
/*
* Webpack development server configuration
*
* This file is set up for serving the webpack-dev-server, which will watch for changes and recompile as required if
* the subfolder /webpack-dev-server/ is visited. Visiting the root will not automatically reload.
*/
'use strict';
var webpack = require('webpack');
var path = require('path');
module.exports = {
output: {
filename: 'main.js',
publicPath: '/assets/'
},
cache: true,
debug: true,
// Sourcemaps are enabled. If this is too slow, set it to false.
devtool: "eval-source-map",
noInfo: true, // --no-info option
entry: [
'webpack/hot/only-dev-server',
'./src/scripts/components/main.js'
],
stats: {
colors: true,
reasons: true
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'styles': path.join(__dirname, 'src/styles'),
'components': path.join(__dirname, 'src/scripts/components/'),
'actions': path.join(__dirname, 'src/scripts/actions/'),
'stores': path.join(__dirname, 'src/scripts/stores/'),
'jquery': path.join(__dirname, 'bower_components/jquery/dist/jquery'),
'jQueryUi': path.join(__dirname, 'bower_components/fullcalendar/lib/jquery-ui.custom.min'),
'moment': path.join(__dirname, 'bower_components/moment/src/moment')
}
},
module: {
preLoaders: [{
test: /\.js(x)?$/,
exclude: /node_modules/,
loader: 'jsxhint?babel'
}],
loaders: [{
test: /\.js(x)?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}, {
test: /\.less/,
loader: 'style-loader!css-loader!less-loader'
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{ test: /\.(woff|woff2)$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
Jquery and all of the calendars dependancies appear to be defined. The issue is being thrown in the following function in the calendar source code:
// Causes the element to stop following the mouse. If shouldRevert is true, will animate back to original position.
// callback gets invoked when the animation is complete. If no animation, it is invoked immediately.
stop: function(shouldRevert, callback) {
var _this = this;
var revertDuration = this.options.revertDuration;
function complete() {
this.isAnimating = false;
_this.destroyEl();
this.top0 = this.left0 = null; // reset state for future updatePosition calls
if (callback) {
callback();
}
}
if (this.isFollowing && !this.isAnimating) { // disallow more than one stop animation at a time
this.isFollowing = false;
$(document).off('mousemove', this.mousemoveProxy);
if (shouldRevert && revertDuration && !this.isHidden) { // do a revert animation?
this.isAnimating = true;
this.el.animate({
top: this.top0,
left: this.left0
}, {
duration: revertDuration,
complete: complete
});
}
else {
complete();
}
}
},
It looks like a really weird scoping issue caused by webpack, I'm at a loss as to how to fix it. Based on the stack trace, it also looks like the touch start event doesn't even fire:
Uncaught TypeError: Cannot set property 'isAnimating' of
undefinedcomplete # fullcalendar.js?2811:2551stop #
fullcalendar.js?2811:2577dragStop # fullcalendar.js?2811:3761trigger #
fullcalendar.js?2811:2137dragStop # fullcalendar.js?2811:2090dragStop
# fullcalendar.js?2811:2409stopDrag #
fullcalendar.js?2811:2080stopListening #
fullcalendar.js?2811:2103mouseup # fullcalendar.js?2811:2071(anonymous
function) # fullcalendar.js?2811:760dispatch #
jquery.js?0403:4435jQuery.event.add.elemData.handle #
jquery.js?0403:4121
If it's a scoping issue it might not be webpack related but react doing some autobinding magic in such a way that it's not compatible with how the jquery plugin works.
If that's truly the case, you could tweak the fullcalendar code for the calls to callback() and complete() to callback.call(this) and complete.call(this) so that the expected context is set every time.
Modifying the plugin source is not a particularly appealing solution, but it should get you by in a pinch.
I have implemented fullcalendar and it is working fine apart from 2 issues (I'll raise the second one in another question).
I can't add an image as I don't have the reputation! So to explain what I mean, I have an event that runs from 10am, July 3rd to 10am July 5th. When viewed by month it only displays on the 3rd July and does not span the 4th or 5th.
Here is my implementation code;
$('#calendar').fullCalendar({
events:function(start, end, callback) {
$.ajax({
type: "POST",
url: 'webservices/wsEvents.asmx/GetEventsBetweenDates',
contentType: "application/json",
dataType: "json",
data: formatCalendarDates(start, end),
success: function (doc) {
var events = [];
$.each(doc.d, function() {
var duration = GetDuration($(this).attr('StartTime'), $(this).attr('EndTime'), true);
var allday = moment.duration(moment($(this).attr('EndTime'))-moment($(this).attr('StartTime'))).days() >=1 ? true : false;
// duration.toLowerCase().indexOf("day") >= 0 ? true : false;
events.push({
title: replaceCharacter($(this).attr('Title'), "/u0027", "'"),
start: $(this).attr('StartTime'),
id: $(this).attr('ID'),
description: replaceCharacter($(this).attr('Description'),"/u0027","'"),
allDay: allday,
locationID: $(this).attr('Location'),
location: replaceCharacter($(this).attr('LocationName'), "/u0027", "'"),
duration: duration
});
});
callback(events);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// debugger;
ShowError("Error: " + textStatus);
}
});
},
theme: true,
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonIcons:{
prevYear: "ui-icon ui-icon-triangle-1-w",
prev: "ui-icon ui-icon-carat-1-w",
next: "ui-icon ui-icon-carat-1-e",
nextYear: "ui-icon ui-icon-triangle-1-e"
},
editable: false,
allDaySlot: true,
allDayDefault: false,
firstDay: 1,
timeFormat: {
month: "H:mm",
week: "",
day: ""
},
weekNumbers: true,
weekNumberCalculation: "iso",
weekMode: "liquid",
weekNumberTitle: "Wk",
defaultView: "month",
firstHour: 0,
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
columnFormat: {
month: 'ddd', // Mon
week: 'ddd d/M', // Mon 9/7
day: 'dddd d/M' // Monday 9/7
},
eventClick: function (date, allDay, jsEvent, view) {
DisplaySingleEvent(date, false)
},
eventMouseover: function (event, jsEvent, view) {
$(this).css('cursor', 'pointer')
},
eventMouseout: function (date, allDay, jsEvent, view) {
$(this).css('cursor', 'default')
},
eventRender: function (event, element) {
},
viewDisplay: function (view) {
}
});
Can anyone see from my code what I've done wrong?
Thanks
Terry.
Educated guess: specify end in the events array. You give duration but this is not a standard attribute according to the spec.