I just want to add the border style to one of the events but not all events in full Calendar. Any help?
changes are like want to add the border styles to the event for the fullcalendar.changes are like want to add the border styles to the event for the full calendar.
Only add the border style to the single event for the calendar.
Only add the border style to the single event for the calendar.
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],
defaultView: 'resourceTimeGridDay',
defaultDate: '2019-08-07',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right:
'resourceTimeGridDay,resourceTimeGridTwoDay,timeGridWeek,dayGridMonth'
},
views: {
resourceTimeGridTwoDay: {
type: 'resourceTimeGrid',
duration: { days: 2 },
buttonText: '2 days',
}
},
//// uncomment this line to hide the all-day slot
//allDaySlot: false,
resources: [
{ id: 'a', title: 'Room A', eventColor: 'pink' },
{ id: 'b', title: 'Room B', eventColor: 'green' },
{ id: 'c', title: 'Room C', eventColor: 'orange' },
{ id: 'd', title: 'Room D', eventColor: 'red' }
],
events: [
{ id: '1', resourceId: 'a', start: '2019-08-06', end: '2019-08-
08', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2019-08-07T09:00:00', end:
'2019-08-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2019-08-07T12:00:00', end:
'2019-08-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2019-08-07T07:30:00', end:
'2019-08-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2019-08-07T10:00:00', end:
'2019-08-07T15:00:00', title: 'event 5' }
],
select: function(arg) {
console.log(
'select',
arg.startStr,
arg.endStr,
arg.resource ? arg.resource.id : '(no resource)'
);
},
dateClick: function(arg) {
console.log(
'dateClick',
arg.date,
arg.resource ? arg.resource.id : '(no resource)'
);
}
});
calendar.render();
});
</script>
<style>
#a {
border-color: 5px dashed yellow;
}
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Only add the border style to the single event for the calendar.
You may use "borderColor" option within the event as follow:
events: [
{ id: '1', resourceId: 'a', start: '2019-08-06', end: '2019-08-
08', title: 'event 1', borderColor: '#0000ff' },
{ id: '2', resourceId: 'a', start: '2019-08-07T09:00:00', end:
'2019-08-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2019-08-07T12:00:00', end:
'2019-08-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2019-08-07T07:30:00', end:
'2019-08-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2019-08-07T10:00:00', end:
'2019-08-07T15:00:00', title: 'event 5' }
]
Please note I have added 'borderColor' option in First Event.
And you may use eventRender to apply border style as follows:
eventRender: function (info) {
var eventId = info.event.id;
if (eventId == '1')
{
$(info.el).css("border-style", "dashed");
$(info.el).css("border-color", "#ffff00");
}
}
Related
As you can see in this javascript fullcalendar code, I want to display all past data in title and hide all future data in fullcalendar title.. the future data will show on its date. I'm beginner can you help me that how to hide future data in title.
Thanks.
var calendar = new FullCalendar.Calendar( calendarEl, {
headerToolbar: {
left: 'title',
center: '',
right: 'prev,next'
},
initialDate: '2022-04-01',
dayMaxEvents: true,
events: [
{
title: '8',
start: '2022-04-13',
},
{
title: '9',
start: '2022-04-14',
},
{
title: '6',
start: '2022-04-15',
},
{
title: '4',
start: '2022-04-18',
},
{
title: '6',
start: '2022-04-19',
},
{
title: '3',
start: '2022-04-20',
},
{
title: '3',
start: '2022-04-21',
},
{
title: '3',
start: '2022-04-22',
},
{
title: '3',
start: '2022-04-25',
},
{
title: '3',
start: '2022-04-26',
},
{
title: '3',
start: '2022-04-27',
}
]
});
Use Array.prototype.filter to filter events starting after now.
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'title',
center: '',
right: 'prev,next'
},
initialDate: '2022-04-01',
dayMaxEvents: true,
events: [
{
title: '8',
start: '2022-04-13',
},
{
title: '9',
start: '2022-04-14',
},
{
title: '6',
start: '2022-04-15',
},
{
title: '4',
start: '2022-04-18',
},
{
title: '6',
start: '2022-04-19',
},
{
title: '3',
start: '2022-04-20',
},
{
title: '3',
start: '2022-04-21',
},
{
title: '3',
start: '2022-04-22',
},
{
title: '3',
start: '2022-04-25',
},
{
title: '3',
start: '2022-04-26',
},
{
title: '3',
start: '2022-04-27',
}
].filter(event => new Date(event.start).getTime() < Date.now())
});
You can also refactor this operation into a function like so:
function filterFutureEvents(events) {
return events.filter(event => new Date(event.start).getTime() < Date.now());
}
// usage
const fileteredEvents = filterFutureEvents([/* ... */]);
i have role.
when user click block box. box will be selection 2 box after box clicked (like drag selected by mouse).
if 2 box have one or more union some event. selected to fail. (make sure 2 box is available box) but i stuck how to do it.
i want to build registration building for event. and this is interface to get time to registration.
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
selectable: true,
eventLimit: true, // allow "more" link when too many events
allDaySlot: false,
editable: false,
selectAllow: function(selectInfo) {
var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
console.log(selectInfo.end);
return duration.asHours() <= 1;
},
selectMinDistance: 0,
header: {
left: 'prev',
center: 'title',
right: 'next'
},
eventMouseover: function(event, jsEvent, view) {},
validRange: function(nowDate) {
nowDate = nowDate.clone().add(-1, 'day');
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
businessHours: [{
dow: [1], // Monday - Friday
start: '08:00',
end: '12:00',
}, {
dow: [4, 5], // Monday - Friday (if adding lunch hours)
start: '13:00',
end: '17:00',
}],
selectConstraint: "businessHours",
resources: [{
id: 'b',
title: '',
eventColor: 'green'
}, ],
events: [{
id: '2',
resourceId: 'b',
start: '2018-10-27T09:00:00',
end: '2018-10-27T10:00:00'
},
{
id: '3',
resourceId: 'b',
start: '2018-11-28T12:00:00',
end: '2018-11-28T06:00:00'
},
{
id: '4',
resourceId: 'b',
start: '2018-10-29T07:30:00',
end: '2018-10-29T09:30:00'
},
{
id: '5',
resourceId: 'b',
start: '2018-10-29T10:00:00',
end: '2018-10-29T15:00:00'
}
],
select: function(start, end, jsEvent, view, resource) {
console.log(
'select ted',
start.format(),
end.format(),
resource ? resource.id : '(no resource)'
);
},
});
});
i have snippet
$(function() { // document ready
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
selectable: true,
eventLimit: true, // allow "more" link when too many events
allDaySlot: false,
editable: false,
selectAllow: function(selectInfo) {
var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
console.log(selectInfo.end);
return duration.asHours() <= 1;
},
selectMinDistance: 0,
header: {
left: 'prev',
center: 'title',
right: 'next'
},
eventMouseover: function(event, jsEvent, view) {},
validRange: function(nowDate) {
nowDate = nowDate.clone().add(-1, 'day');
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
businessHours: [{
dow: [1], // Monday - Friday
start: '08:00',
end: '12:00',
}, {
dow: [4, 5], // Monday - Friday (if adding lunch hours)
start: '13:00',
end: '17:00',
}],
selectConstraint: "businessHours",
resources: [{
id: 'b',
title: '',
eventColor: 'green'
}, ],
events: [{
id: '2',
resourceId: 'b',
start: '2018-10-27T09:00:00',
end: '2018-10-27T10:00:00'
},
{
id: '3',
resourceId: 'b',
start: '2018-11-28T12:00:00',
end: '2018-11-28T06:00:00'
},
{
id: '4',
resourceId: 'b',
start: '2018-10-29T07:30:00',
end: '2018-10-29T09:30:00'
},
{
id: '5',
resourceId: 'b',
start: '2018-10-29T10:00:00',
end: '2018-10-29T15:00:00'
}
],
select: function(start, end, jsEvent, view, resource) {
console.log(
'select ted',
start.format(),
end.format(),
resource ? resource.id : '(no resource)'
);
},
});
});
.fc-time-grid .fc-event,
.fc-time-grid .fc-bgevent {
width: calc(100% + 4px);
margin-left: -2px;
border-radius: 0px;
}
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
I am using jQuery 2.0.0+, Moment 2.9.0+ in my project. I am unable to add resources into dayview. This is my coding
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView : 'agendaDay',
defaultDate : '2018-04-07',
editable : true,
selectable : true,
eventLimit : true, // allow "more" link when too many events
header : {
left : 'prev,next today',
center : 'title',
right : 'agendaDay,month'
},
views : {
agendaTwoDay : {
type : 'agenda',
duration : {
days : 2
},
//groupByDateAndResource: true
}
},
//// uncomment this line to hide the all-day slot
allDaySlot : false,
resources : [ {
id : 'a',
title : 'Room A'
}, {
id : 'b',
title : 'Room B',
eventColor : 'green'
}, {
id : 'c',
title : 'Room C',
eventColor : 'orange'
}, {
id : 'd',
title : 'Room D',
eventColor : 'red'
} ],
events: [
{ id: '1', resourceId: 'a', start: '2018-04-06', end: '2018-04-08', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2018-04-07T09:00:00', end: '2018-04-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2018-04-07T12:00:00', end: '2018-04-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2018-04-07T07:30:00', end: '2018-04-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2018-04-07T10:00:00', end: '2018-04-07T15:00:00', title: 'event 5' }
],
I am using full-calendar from fullcalendar.io and having some trouble customizing its time slot.
I want to add time slots like breakfast, lunch, dinner etc also user can add his/her own slots. How do I set the fixed height according to the number of slots? Also, I want to set the slot column text for breakfast, lunch etc. not 12 am, 6 am. Here's what I did until now:
var today = moment();
$('#calendar').fullCalendar({
droppable: true,
defaultView: 'Week',
header: false,
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
/*events: [
{
title : 'event1',
start : today,
imageurl:'assets/images/recipe/salad.jpg'
}
],*/
/*views: {
agendaWeek: {
agendaEventMinHeight: 150,
allDaySlot: false,
slotLabelInterval: { hours: 6},
slotDuration: { hours: 1},
duration: { days: 7}
}
},*/
eventRender: function (event, element) {
element.find(".fc-event-title").remove();
element.find(".fc-event-time").remove();
var new_description = '#';
element.append(new_description);
},
now: today,
/*header: {
left: 'promptResource',
center: '',
right: ''
},*/
footer: {
left: 'promptResource',
center: '',
right: ''
},
customButtons: {
promptResource: {
text: '+ add course',
click: function() {
var title = prompt('Course name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
}
}
},
views: {
Week: {
type: 'timeline',
duration: { Days: '7' },
slotLabelInterval: { hours: 24},
slotDuration: { hours: 24},
}
},
resourceLabelText: 'Meal',
resourceRender: function(resource, cellEls) {
cellEls.on('click', function() {
if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
$('#calendar').fullCalendar('removeResource', resource);
}
});
},
resources: [
{ id: 'a', title: 'Breakfast' , eventColor: 'red'},
{ id: 'b', title: 'Lunch', eventColor: 'green' },
{ id: 'c', title: 'Dinner', eventColor: 'orange' },
{ id: 'd', title: 'Other', eventColor: 'grey'},
],
events: [
{ id: '1', resourceId: 'b', start: today, end: today, title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" data-print="true" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css" />
<div id="calendar"></div>
Any help would be really appreciated.
Edit:
Here's what I actually want to implement.
In design, you can see that the time of the day is not important. I want the users to add as many meals a day as they can. I just a want the option to add the meal's title(event). And remove the time slots on the left side.
update:
I've managed to solve this problem to some extent. Here's how it looks now:
But still, there are some problems like how can I change the date format in columnHeader and how can I give fix size to row and columns?
I'd like to add a new custom array "resource" in FullCalendar to group CITIES information instead insert cities elements (name, latitude, longitude, ...) directly inside events array (to prevent to much data loading...).
To retrieve a resource exist a specific function:
$('#calendar').fullCalendar( 'getEventResource', event.id );
But how can I get my custom array "customArrayCities" from "cityID" inside my events? Is it possible?
customArrayCities: [
{ id: 'C1', name: 'New York', latitude: '44.111111', longitude: '10.111111'},
{ id: 'C2', name: 'Houston', latitude: '45.111111', longitude: '11.111111'}
]
resources: [
{ id: 'a', impianti: 'Impianto 1', title: 'Linea 1' },
{ id: 'b', impianti: 'Impianto 2', title: 'Linea 2' }
],
events: [
{ id: '1', resourceId: 'a', start: '2017-09-07T02:00:00', end: '2017-09-07T04:00:00', title: 'Title 1', cityID: 'C1'},
{ id: '2', resourceId: 'b', start: '2017-09-07T04:00:00', end: '2017-09-07T13:00:00', title: 'Title 2', cityID: 'C1' }
]
For example i need a snippet like:
var array_cities = $('#calendar').fullCalendar( 'getCustomArrayCitiesByEventID', event.id );
For example with event.id = 1
for (i in array_cities) {
echo array_cities[i].id;
echo array_cities[i].name;
}
Output:
C1
New York
I need it when I click on a Event. I get a Bootstrap Modal with info about event and further info about city.
Having clarified (from the comments) that you want to do this when the event is clicked, here is a simplified example. It does not use Scheduler, or a bootstrap modal, but it gives you the general principle, and you can adapt it easily to add those details.
var cities = [{
id: 'C1',
name: 'New York',
latitude: '44.111111',
longitude: '10.111111'
}, {
id: 'C2',
name: 'Houston',
latitude: '45.111111',
longitude: '11.111111'
}];
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'month',
defaultDate: "2017-09-07",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: [{
id: '1',
resourceId: 'a',
start: '2017-09-07T02:00:00',
end: '2017-09-07T04:00:00',
title: 'Title 1',
cityID: 'C1'
}, {
id: '2',
resourceId: 'b',
start: '2017-09-07T04:00:00',
end: '2017-09-07T13:00:00',
title: 'Title 2',
cityID: 'C1'
}, {
id: '3',
resourceId: 'b',
start: '2017-09-10T04:00:00',
end: '2017-09-10T13:00:00',
title: 'Title 3',
cityID: 'C2'
}],
eventClick: function(calEvent, jsEvent, view) {
//loop through the cities until we find the right one
$.each(cities, function(index, city) {
if (city.id == calEvent.cityID)
{
//display the city information however you wish to:
alert("City: " + city.name);
return false; //stop looping now we've found the correct record
}
});
}
});
});
See http://jsfiddle.net/sbxpv25p/31/ for a working example.