Version: 2.4.0
$("#calendar").fullCalendar({
height: 'auto',
header: {
left: '',
center: 'title',
right: ''
},
views: {
agendaFourWeeks: {
type: 'month',
duration: { weeks: 1 },
fixedWeekCount: false,
title: "HELLO",
}
},
defaultView: 'agendaFourWeeks',
});
});
The above code hides the month day number located in each cell's upper right hand corner. If you change the week to 2 (weeks: 2) it then shows the day number in the upper right hand corner. I want to display the day number for 1 week.
Had the same issue as I was trying to place an icon in the day row as possible in the month view.
Found a solution by updating the cells in the row created when the weekNumbers option is set to true. This was done in the viewRender callback.
viewRender: function () {
// add the day date to the empty cells of the week number row
var i = 0;
var viewStart = $('#calendar').fullCalendar('getView').intervalStart;
$("#calendar").find('.fc-content-skeleton thead td:not(:nth-child(1))').empty().each( function(){
$(this).append(moment(viewStart).add(i, 'days').format("D"));
i = i + 1;
});
},
Then style to match the month view
.fc-content-skeleton thead td {
text-align: right;
padding-right: 5px;
padding-top:2px;
}
.fc-week-number {
color: #bfbfbf;
}
Example working as this Fiddle
( is using the moment.js library also).
Related
I have a layout that I need to put side by side.
Th code is in Extjs but I'm trying to style this container when a values gets selected in the combo box. As in the gif:
https://i.stack.imgur.com/dlgKC.gif
The container is moving upwards when any selection is been made. Is there any way in CSS I can control this behavior on select and make sure it stays still and does not move on selection?
addFilter: function(token, filter, op) {
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
})
}]
}); // end of filteritem
}
},
CSS:
.item div.qx-multi-select-combo-wrap{
position: absolute;
left: 320px;
}
Any idea ? Thanks!
I'm using the jQuery FullCalendar plugin and want to hide certain hours in day view.
I want to show the calendar from 6am to 10am and from 12pm to 4pm.
I already set minTime: '6:00' and maxTime: '14:00' but I also need to hide the hours between 10am to 12pm too.
The problem is, fullcalendar relies on Moment.js durations. As far as I can tell, you can't have a duration that is multiple durations.
However, it seems that fullcalendar renders the agenda first, then calculates the position of where the events need to be after the agenda is laid out. So, if a CSS solution is acceptable, you could always do the following:
[data-time^="10"]>td, [data-time^="11"]>td, [data-time^="12"]>td
{
height: 0 !important;
border: 0 !important;
}
This works by matching the table row's "data-time" attribute. The match pattern is a prefix match, to save some typing. If you don't want to use ^= to match the prefix, you can try these:
https://www.w3.org/TR/css3-selectors/#selectors
Edit to demonstrate (works on Chrome 52). As you can see, I also needed to make the children of the affected cells hidden (display: none;). Also note that you'll need to filter your own data to exclude or alter dates times that fall in that range. I've included some events that show what happens if you don't take this precaution.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay'
},
defaultView: 'agendaDay',
defaultDate: '2016-06-12',
editable: true,
eventLimit: true,
events: [
{
title: 'Meeting',
start: '2016-06-12T10:30:00',
end: '2016-06-12T12:30:00'
},
{
title: 'Loooong Meeting',
start: '2016-06-12T09:30:00',
end: '2016-06-12T14:30:00'
},
{
title: 'Lunch',
start: '2016-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-06-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-06-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-06-12T20:00:00'
}
]
});
})
[data-time^="10"]>td,
[data-time^="11"]>td,
[data-time^="12"]>td
{
height: 0 !important;
border: 0 !important;
}
[data-time^="10"]>td *,
[data-time^="11"]>td *,
[data-time^="12"]>td *
{
display: none !important;
}
<link href="http://fullcalendar.io/js/fullcalendar-2.9.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.9.1/fullcalendar.min.js"></script>
<div id="calendar"></div>
I'm using Fullcalendar with a Google Calendar so I can't apply a class to an event as far as I'm aware.
What I want to do should be quite simple and I'm sure the answer will involve eventRender but I just can't get it working.
Simply: change the entire background color of the cell that contains any event (all events are "all day" within the Google Calendar).
What I'm trying to achieve is an "availability" state; any event is "unavailable" i.e. background color red.
Yes, you can do it with eventRender. You'll have to find the td that contains that event. If you inspect the fullCalendar, you'll note the tds have a data-date attribute for that particular day. That is how we will find the td that has an event in it so we can change the background color to red, specifically using:
eventRender: function (event, element) {
var dataToFind = moment(event.start).format('YYYY-MM-DD');
$("td[data-date='"+dataToFind+"']").addClass('activeDay');
}
In this example, the first line in eventRender uses moment to format the event start date into the format needed to match the data-date attribute value. The second line finds a td with the data-date attribute having a value of dataToFind and then adds a class we make up called activeDay, assuming you add something like this to your head/stylesheet:
<style>
.activeDay {background-color:#ff0000 !important;}
</style>
$('#fullCal').fullCalendar({
events: [{
title: 'Main Event 1',
start: new Date(),
end: new Date(),
allDay: false
}, {
title: 'Main Event 2',
start: '2014-10-03 19:00',
end: '2014-10-03 19:30',
allDay: false
}, {
title: 'Main Event 3',
start: '2014-10-15 17:00',
end: '2014-10-15 18:00',
allDay: false
}, {
title: 'Main Event 4',
start: '2014-11-30 7:00',
end: '2014-11-30 18:00',
allDay: false
}, ],
header: {
left: '',
center: 'prev title next',
right: ''
},
eventRender: function(event, element) {
var dataToFind = moment(event.start).format('YYYY-MM-DD');
$("td[data-date='" + dataToFind + "']").addClass('activeDay');
}
});
.activeDay {
background-color: #ff0000 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<p>Example:</p>
<div id="fullCal"></div>
The answer of #MikeSmithDev does not work if you have events on multiple days.
If you have multiple days use this javascript:
eventRender: function (event, element) {
var start = moment(event.start);
var end = moment(event.end);
while( start.format('YYYY-MM-DD') != end.format('YYYY-MM-DD') ){
var dataToFind = start.format('YYYY-MM-DD');
$("td[data-date='"+dataToFind+"']").addClass('dayWithEvent');
start.add(1, 'd');
}
}
It uses the same principle as MikeSmithDev's, so you must use the same css.
I am facing problem while adding two agendaWeekView in a single calendar. Please have a look the calendar config.
header:{
left: 'prev,next',
center: 'title',
right: 'agendaWeek agendaWeek'
},
here I am calling agendaWeek two times, It appears two tab in the calendar called "Week" but when I clicked anyone of them both views are activated and I am also not able to change the text of the week tabs. So please give some suggestion for it.
From the looks of it, you are not closing the right header variable with a quotation.
Maybe this will work.
header:{
left: 'prev,next',
center: 'title',
right: 'agendaWeek agendaWeek'
},
Not sure though. If you could post a plunker of fiddle then we could diagnose with ease.
Now we can duplicate views or create own custom views in the single calenndar. Here is the solution.
We need to change in the fullcalendar.js file.
Firstly add your custom view name, according to my question I wanted to duplicate agendaView so that's why my view name will be "duplicateAgendaWeek". Set the name into defaults.
buttonText: {
prev: "<span class='fc-text-arrow'>‹</span>",
next: "<span class='fc-text-arrow'>›</span>",
prevYear: "<span class='fc-text-arrow'>«</span>",
nextYear: "<span class='fc-text-arrow'>»</span>",
today: 'today',
month: 'month',
week: 'Weekly',
day: 'Daily',
duplicateAgendaWeek: 'Duplicate Week' // here is the name of my view.
},
Now duplicate the existing agendaWeek function with your view name.
fcViews.duplicateAgendaWeek= DuplicateAgendaWeekView;
function DuplicateAgendaWeekView(element, calendar) {
var t = this;
// exports
t.render = render;
// imports
AgendaView.call(t, element, calendar, 'duplicateAgendaWeek');
var opt = t.opt;
var renderAgenda = t.renderAgenda;
var formatDates = calendar.formatDates;
function render(date, delta) {
if (delta) {
addDays(date, delta * 7);
}
var start = addDays(cloneDate(date), -((date.getDay() - opt('firstDay') + 7) % 7));
var end = addDays(cloneDate(start), 7);
var visStart = cloneDate(start);
var visEnd = cloneDate(end);
var weekends = opt('weekends');
if (!weekends) {
skipWeekend(visStart);
skipWeekend(visEnd, -1, true);
}
t.title = formatDates(
visStart,
addDays(cloneDate(visEnd), -1),
opt('titleFormat')
);
t.start = start;
t.end = end;
t.visStart = visStart;
t.visEnd = visEnd;
renderAgenda(weekends ? 7 : 5);
}
}
;;
Now the last one need to set formats for our custom views.
// time formats
titleFormat: {
month: 'MMMM yyyy',
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
duplicateAgendaWeek: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // set your view format here
day: 'dddd, MMM d, yyyy'
},
columnFormat: {
month: 'ddd',
week: 'ddd M/d',
duplicateAgendaWeek: 'ddd M/d',// set your view format here
day: 'dddd M/d'
},
Now just call the view name from your controller.
header:{
left: 'prev,next',
center: 'title',
right: 'agendaDay agendaWeek duplicateAgendaWeek',
},
I'm using jQuery fullCalendar. A client wants to see only their bussiness opening hours in the calendar. Is that possible? How?
Example: a bussiness opens from 9am to 1pm and from 3pm to 10pm
The minTime and maxTime options will let you set the first and last hour. I don't think you can have a calendar with a break in the middel though.
Maybe you could create a recurring event called lunch and color it differently to your actual events
On current fullcallendar version (5.x), maxTime and minTime options where renamed to slotMaxTime and slotMinTime.
To hide most business time - i.e., night and/or non-working days:
Calculate some values right from your businessHours specification
const workSpec = [
{
daysOfWeek: [1, 2, 3, 4],
startTime: '08:00',
endTime: '18:00'
}
{
daysOfWeek: [5],
startTime: '09:00',
endTime: '14:00'
}
]
/*
* calculate the following:
* - minimum "opening time"
* - maximum "opening time"
* - working days
* - non-working days
*/
const workMin = workSpec.map(item => item.startTime).sort().shift()
const workMax = workSpec.map(item => item.endTime).sort().pop()
const workDays = [...new Set(workSpec.flatMap(item => item.daysOfWeek))]
const hideDays = [...Array(7).keys()].filter(day => !workDays.includes(day))
Use calculated values on the related properties - i.e. for #fullcalendar/react:
<FullCalendar
//...
businessHours={workSpec}
slotMinTime={workMin}
slotMaxTime={workMax}
hiddenDays={hideDays}
//...
/>
Disclaimer: this was a quick-n-dirty go. There may be refactors to improve performance
there has been an update on fullcalendar that allows you to apply business hours
http://fullcalendar.io/docs/display/businessHours/
however, i don't think it ll allow you to impement a break within the day..
over here
Apply different timeslots and ranges for each day on Fullcalendar
you ll find my approach on a similar issue that i used Javascript to prevent selection of specific period and also with css i highlighted the areas that i didn't want to be able to be selected..
To completely hide the desired row (NON business/break hour) you have to modify the following method inside fullcalendar.js:
// Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
renderSlatRowHtml: function() {...}
and then avoid entering the while clause that adds the html code:
while (slotTime < this.maxTime) {...}
you can add an if clause up inside that while, or even more work out to enter a config param to check inside that while iteration.
hiding the break period is still not possibleas far as i know,
but version 2 has now to peoperties minTime and maxTime which you can use to hide non-business hours.
Documentation here: http://fullcalendar.io/docs/agenda/minTime/
Use selectConstraint and eventConstraint options to prevent click event in non business hours (from full calendar 2.2version). in my case i used selectConstraint: "businessHours" https://fullcalendar.io/docs/selection/selectConstraint/ https://fullcalendar.io/docs/event_ui/eventConstraint/
For anyone trying this.
This one is to remove the non business
<style>
.fc .fc-non-business {
background: var(--fc-non-business-color);
display: none;
}
</style>
This one is for the business hours to remove those time that you want to disable
selectConstraint: 'businessHours',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
startTime: '07:00', // a start time (10am in this example)
endTime: '20:00', // an end time (6pm in this example)
}
Use Content height to adjust the calendar height
contentHeight: 680,
This is the whole configuration for the calendar
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
hiddenDays: [0],
allDaySlot: false,
selectOverlap:false,
selectable: true,
selectConstraint: 'businessHours',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
startTime: '07:00', // a start time (10am in this example)
endTime: '20:00', // an end time (6pm in this example)
},
select: function(data) {
var start = formatDateToTime(data.start);
var end = formatDateToTime(data.end);
var date = data.startStr.substring(0, 10);
var uid = "add";
$.ajax({
type: "POST",
url: "{{ url('event/getModal')}}",
data: {
uid: uid,
start: start,
end: end,
date: date
},
success: function(response) {
$("#modal-view").modal('toggle');
$("#modal-view").find(".modal-title").text("Add Event");
$("#modal-view").find("#modal-display").html(response);
}
});
},
headerToolbar:{
start: '', // will normally be on the left. if RTL, will be on the right
center: '',
end: '' // will normally be on the right. if RTL, will be on the left
},
dayHeaderFormat:{ weekday: 'long' },
editable: true,
events: <?php echo $Events?>,
contentHeight: 680,
eventClick: function(calEvent, jsEvent, view) {
console.log(calEvent);
},
viewDidMount: function(event, element) {
$('td[data-time]').each(function() {
var time = $(this).attr("data-time");
if(time < "07:00:00"){
$(this).parent().remove();
}
if(time > "19:30:00"){
$(this).parent().remove();
}
console.log($(this).parent());
});
},
eventDidMount: function(event, element) {
// To append if is assessment
if(event.event.extendedProps.description != '' && typeof event.event.extendedProps.description !== "undefined")
{
$(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.description+"</b>");
$(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.prof+"</b>");
}
}
});
calendar.render();
Sample Output
Check this