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"
}
Related
The spec for the rrule plugin says that Until dates are Inclusive. I'm not seeing that. Am I mis-reading?
https://github.com/jakubroztocil/rrule
If given, this must be a Date instance, that will specify the limit of the recurrence. If a recurrence instance happens to be the same as the Date instance given in the until argument, this will be the last occurrence.
I have this test:
calendaring.testRecur = function(dayOrWeek){
var rruleDataWeekly = {
freq: 'WEEKLY',
interval: 1,
byweekday: [ 'MO', 'WE', 'FR' ],
dtstart: '2019-11-01T10:30:00',
until: '2019-11-15'
};
var rruleDataDaily = {
freq: 'DAILY',
interval: 1,
count: 5,
dtstart: '2019-11-04T09:30:00',
};
var rruleData = dayOrWeek === "day" ? rruleDataDaily : rruleDataWeekly;
var title = dayOrWeek === "day" ? "Test Daily" : "Test Weekly";
var newEvent = {
title: title,
duration: "00:45",
rrule: rruleData
};
calendaring.calendar.addEvent(newEvent);};
And this is my config for the calendar:
calendaring.calendar = new Calendar(calendarEl, {
events: '/myurl',
plugins: ['rrule', 'interaction', 'dayGrid', 'timeGrid', 'bootstrap', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay',
},
defaultView: 'timeGridWeek',
slotDuration: '00:15',
slotLabelInterval: '01:00',
minTime: '06:00',
maxTime: '21:00',
allDaySlot: false,
slotEventOverlap: false,
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'List',
},
themeSystem: 'bootstrap',
editable: true,
selectable: true,
droppable: true,
fixedWeekCount: false,
hiddenDays: [ 0, 6 ],
eventLimit: 6,
});
calendaring.calendar.render();};
The issue was I didn't have a time associated with my UNTIL. So, it assumes midnight, not 23:59:59. Phew. Thanks #ADyson for the help.
You can use the code below to show a day, daily, weekly, every two weeks and monthly events with a tooltip on mouse hover event.
In this example you can see how we can set up rrule in FullCalendar.
Visit here- https://stackoverflow.com/a/68770685/9673996
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.
I'm using fullcalendar in my application. Here is the part of my working code
$('#calendar').fullCalendar({
timeFormat: 'HH:mm',
views: {
week: {
titleFormat: 'D MMM YYYY',
columnFormat: 'ddd D'
},
day: {
titleFormat: 'D MMMM YYYY',
columnFormat: 'dddd D'
}
},
firstDay: 1,
nowIndicator: true,
weekNumberCalculation: 1,
slotLabelFormat: 'HH:mm',
slotLabelInterval: '00:10',
events: events_arr,
});
which renders the calendar perfectly. The question is, Is there a way to highlight only the available slots to the user? I mean if there is an event today from 10:00 to 11:00, I need to show the slots except the time 10:00 to 11:00.
I referred the documentation, but nothing found. If anybody knows how to highlight the available slot, please share your thoughts.
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.
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'
},