I have a jQuery Full Calendar in my UI and it looks as follows:
The problem is the 10:00-10:00am portion of the event title, which seemingly is added to the element based upon the event startTime and endTime parameters in the JSON which sets up the UI element. Please see my code section for this here:
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
allDayText: 'All Day',
columnFormat: {
month: 'ddd',
week: 'ddd d/M',
day: 'dddd d/M'
},
editable: false,
weekends: true,
timeFormat: 'h:mm-h:mma ',
axisFormat: 'hh:mma',
firstDay: 1,
slotMinutes: 15,
defaultView: 'month',
minTime: '10:00',
maxTime: '17:00',
monthNames: ["January","February","March","April","May","June","July", "August", "September", "October", "November", "December" ],
monthNamesShort: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","nov","Dec"],
dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
dayNamesShort: ["Sun","Mon", "Tue", "Wed", "Thus", "Fri", "Sat"],
buttonText: {
today: "Today",
day: "Day",
week:"Week",
month:"Month"
},
selectable: true,
selectHelper: false,
select: function(start, end, allDay) {
},
events: [
{
id: "3",
title: "My event title",
start: new Date(2014,10,03,10,0),
end: new Date(2014,10,03,12,0),
allDay: false,
backgroundColor : "#7F97FF",
textColor: "white"
},
The problem is in the UI it shows 10:00-10:00am which doesnt make sense. According to my events code it should start at 10,00,00 and end at 12,00,00 so why doesnt the title match this? Can somebody please help me!
Your FullCalendar is not configured correctly since you want the text "Start - End" Time on each event.
timeFormat: 'h:mm-h:mma ', // the output i.e. "10:00-10:00pm"
timeFormat: 'h:mma ', // the output i.e. "10:00pm"
displayEventEnd : true, // it will show on all views (Start - End) in your timeFormat
I've updated your JsFiddle, since you forgot to insert the external sources, I've imported the FullCalendar libraries in order to work.
Related
I'm using fullcalendar and i want to add an event to an specific day and hour but the event get render on all of the days. (time slot works)
I went through all the documentation but couldn't find any error.
My code:
var calendar = new FullCalendar.Calendar(calendarEl, {
events: [{ // My event
title: 'The Title',
start: '2020-08-05',
end: '2020-08-06',
startTime: '09:00:00',
endTime: '10:00:00',
allDay: false
}],
contentHeight: 'auto',
initialDate: new Date('2020-08-01'),
validRange: {
start: '2020-08-01',
end: '2020-08-18'
},
titleFormat: { year: 'numeric', month: 'long', day: 'numeric' },
headerToolbar: {
start: 'title',
center: '',
end: 'prev,next'
},
initialView: 'timeGridWeek',
slotDuration: '01:00:00',
slotMinTime: '09:00:00',
slotMaxTime: '18:00:00',
weekends: false,
locale: 'es',
allDaySlot: false,
});
Here is my codepen with the error and the code im using!
https://codepen.io/alfijuan/pen/yLeqwer?editors=1010
Hope anyone can help!
Thanks!
You've specified it as a recurring event. Remove the startTime and endTime properties and merge the time data into the start and end properties together with the date.
{
title: 'The Title',
start: '2020-08-05 09:00:00',
end: '2020-08-06 10:00:00',
allDay: false
}
Demo: https://codepen.io/ADyson82/pen/ZEQMEvY
See https://fullcalendar.io/docs/v5/event-object and https://fullcalendar.io/docs/v5/recurring-events to understand the difference and the properties required for a single event vs a recurring one
For fullCalendar I have written the code below:
$('#mycalendar').fullCalendar(
{
allDaySlot:false,
slotDuration: '00:30:00' ,
//slotMinutes: '120',
lang: currentLangCode,
minTime: '4:00am',
maxTime: '24:00pm',
slotEventOverlap: true,
slotLabelFormat:'h(:mm)a',
showAgendaButton: true,
columnFormat: { month: 'ddd', week: 'ddd M/D', day: 'ddd M/D' },
timeFormat: 'H:mm',
defaultView: 'listWeek',
eventLimit: true,
theme:false,
editable: true,
contentHeight:'auto',
weekends: false ,
//timezoneParam: 'America/Los_Angeles',
//ignoreTimezone: false,
header:
{
left: 'prev,next today',
center: 'title',
// right: 'agendaWeek'
right: 'month,agendaWeek,agendaDay,listWeek'
},
views: {
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' },
month: {
columnFormat: 'ddd'
},
agenda: {
columnFormat: 'ddd'
}
},
I am getting below error for agendaWeek and agendaDay:
I am using:
jQuery JavaScript Library v3.3.1
FullCalendar v3.9.0
It's because your values for minTime and maxTime and invalid and not parseable as momentJS objects. fullCalendar relies on momentJS to do its date and time processing. Because of this the calendar does not know where to start the display (and thus where the "top" of the calendar is, hence the error message).
Set them to
minTime: '04:00',
maxTime: '24:00',
instead.
See here for a working demo: http://jsfiddle.net/sbxpv25p/581/
See http://momentjs.com/docs/#/parsing/string/ for a list of valid date/time formats which momentJS can recognise. You'll see that "am" and "pm" are not recognised items. In any case they are also unnecessary since you're already specifying the time in 24hr format.
These days i'm working with the fullcalendar.
I want to change the format of the date in the weekview. I found that many people succeeded with columnFormat: { month: 'ddd', week: 'ddd d/M', day: 'dddd d/M' }, but this one doesn't work for me.
Maybe the raison is i used spanish as the language?
Here is my code of calendar and what i want to do. Thank you.
$('#calendar').fullCalendar({
//defaultView: 'week',
locale: "es",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//defaultDate: '2016-01-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
minTime: "09:30:00",
maxTime: "19:30:00",
slotLabelFormat: "h:mm",
slotDuration: "00:30:00",
slotLabelInterval: "00:30:00",
//columnFormat: { month: "ddd", week: "ddd D", day: "dddd" },
select: function(start, end) {
With this code, i got this one now:
And if i delete the '//' of line of columnFormat, it's like:
Can someone help me? Thank you.
Use full calendar View-Specific Options
views: {
month: {
columnFormat: 'dddd' // set format for month here
},
week: {
columnFormat: 'ddd d/M' // set format for week here
},
day: {
columnFormat: 'dddd' // set format for day here
}
},
remove columnFormat from your code and set views config.
the correct answer is the day number with a capital D as follow:
if you don't use the capital leeter fullcalendar will not give you the good day number
views: {
month: {
editable: false
},
week: {
columnFormat: 'ddd D/M' // set format for week here
},
},
You can use this:
columnFormat: {
month: "ddd",
week: "ddd dd",
day: "dddd"
}
I'm using fullcalendar from http://fullcalendar.io
I have it setup for only selecting slots between 9am-5pm, although when in month view if a day is clicked it automatically tries to schedule for 12:00am (00:00:00) --- is there a way to set the default time on month view to 9am ?
my config:
$calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: 475,
defaultDate: moment(),
defaultView: 'agendaWeek',
minTime: "09:00:00",
maxTime: "17:00:00",
titleFormat: "MMMM D, YYYY",
columnFormat: "ddd. MMMM D",
weekends: false,
editable: false,
allDaySlot: false,
eventOverlap: false,
eventDurationEditable: false,
eventLimit: true, // allow "more" link when too many events
eventSources: ['events.php'],
timeFormat: 'h:mm',
businessHours: { start: '09:00', end: '17:00' }
});
EDIT - I found a small solution by doing what i posted below but i'm wondering if there is another way around in the configuration?
dayClick: function(date, jsEvent, view) {
var time = moment(date).format('HH:mm:ss');
if (time == "00:00:00") {
date = moment(date).set('hour', 9);
}
}
instead of using a Full Calendar plugin, I managed to use the JavaScript and jQuery to display my event data to a calendar (I created my own post type as I do not know how to use WP-Calendar plugin). It works fine and other options works fine except lang option!
As FullCalendar displays it in English, I wanted to configure it to Korean so for example I did it like this:
jQuery(document).ready(function(){
jQuery('#calendar').fullCalendar({
theme: true,
lang: 'ko',
header: {
left: 'prev, next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: themeforce.events
});
});
It worked fine a separate PHP (not the functions.php for each theme) but now in WordPress it does not. Does anyone have any idea why this might cause a problem?
Plugin website: https://wordpress.org/plugins/wp-calendar/
I haven't found any lang parameter inside fullcalendar.js. But these options will do what you need:
// time formats
titleFormat: {
month: 'MMMM yyyy',
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
day: 'dddd, MMM d, yyyy'
},
columnFormat: {
month: 'ddd',
week: 'ddd M/d',
day: 'dddd M/d'
},
timeFormat: { // for event elements
'': 'h(:mm)t' // default
},
// locale
isRTL: false,
firstDay: 0,
monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],
monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
dayNames: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
dayNamesShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
buttonText: {
prev: ' ◄ ',
next: ' ► ',
prevYear: ' << ',
nextYear: ' >> ',
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},