I need to highlight a specific day from the fullcalendar using JavaScript/jQuery. The date should be given by user input. I have provided my code below:
<style type="text/css">
.cellBg {
background: #000;
color: #fff;
}
</style>
$(document).ready(function() {
var today=new Date().toISOString().substring(0, 10);
var highligtDate="2017-12-05";
console.log('today',today);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay,today,listMonth'
},
dayRender:function(date,cell){
date = new Date();
date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
$('.fc-day[data-date="'+ date +'"]').addClass('cellBg');
},
///////// edit
dayClick: function (date, jsEvent, view) {
//alert('day click');
},
eventClick:
function (event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
///////////
defaultDate: today,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-05-01'
},
{
title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00'
},
{
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13'
},
{
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-05-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-05-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-05-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-05-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-05-13T07:00:00'
},
{
title: 'Click for Google',
//url: 'http://google.com/',
start: '2017-05-28'
}
]
});
});
Here I have one date var highligtDate="2017-12-05" and I need to highlight this day cell from the calendar.
Compare the date with highligtDate and assign 'cellBg' class to it.There you do not have a condition to assign this class to particular date.
$(document).ready(function() {
var today=new Date().toISOString().substring(0, 10);
var highligtDate="2017-12-05";
console.log('today',today);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay,today,listMonth'
},
dayRender:function(date,cell){
//date = new Date();
//date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
//Compare the date with highligtDate and assign 'cellBg' class to it.
if(date.format('YYYY-MM-DD') == highligtDate)
{
$('.fc-day[data-date="'+ highligtDate +'"]').addClass('cellBg');
}
},
///////// edit
dayClick: function (date, jsEvent, view) {
//alert('day click');
},
eventClick:
function (event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
///////////
defaultDate: today,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-05-01'
},
{
title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00'
},
{
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13'
},
{
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-05-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-05-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-05-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-05-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-05-13T07:00:00'
},
{
title: 'Click for Google',
//url: 'http://google.com/',
start: '2017-05-28'
}
]
});
});
Related
The click of the ADD EVENT field, inside the fullcalendar cell, is superimposing the click of the event.
I have an ADD field inside the cells of the fullcalendar, which creates a quick link to insert an event.
The problem is when the same cell (day) has an event.
I miss the event click that serves to detail.
I need the two clicks to work.
My Codepen
https://codepen.io/lucasmormilho/pen/qBXvaPj
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2021-11-07',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventClick: function(){
alert("Details Event");//click details event
},
dayCellDidMount: function (arg) {
if (!arg.el.classList.contains("fc-day-sun") && !arg.el.classList.contains("fc-day-sat") && !arg.el.classList.contains("fc-day-past")) {
var theElement = arg.el.querySelectorAll(".fc-daygrid-day-frame > .fc-daygrid-day-events")[0]
setTimeout(function () {
theElement.innerHTML = theElement.innerHTML + '<div class="text-center"><span style="color:Gray" onclick="AddEvento()" >ADD</span></div>';
}, 10)
}
},
events: [
{
title: 'All Day Event',
start: '2021-11-01'
},
{
title: 'Long Event',
start: '2021-11-07',
end: '2021-11-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-11-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-11-16T16:00:00'
},
{
title: 'Conference',
start: '2021-11-11',
end: '2021-11-13'
},
{
title: 'Meeting',
start: '2021-11-12T10:30:00',
end: '2021-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2021-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2021-11-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2021-11-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2021-11-19'
}
]
});
calendar.render();
});
function AddEvento() {
alert("ADD EVENT"); //click ADD event
};
I've looking to disable Drag n Drop of "All Day" events here in below Time grid.
I need to block Drag and Drop of All-Day Events into the Timegrid view below that section. So that All-Day Events should always be droppable in All-Day section and Time based events are draggable and droppable in Time base grid section.
Can this be done with FullCalendar JS?
sample code looks like this:
Codepen
HTML:
<div id='calendar'></div>
CSS:
#calendar {
max-width: 900px;
margin: 40px auto;
}
JS:
$(function() {
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
editable: true,
eventDurationEditable: false,
eventLimit: true,
nowIndicator: true,
now: '2019-06-09T09:25:00',
events: [
{
title: 'All Day Event',
start: '2019-06-01',
},
{
title: 'Long Event',
start: '2019-06-07',
end: '2019-06-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-06-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-06-16T16:00:00'
},
{
title: 'Conference',
start: '2019-06-11',
end: '2019-06-13'
},
{
title: 'Meeting',
start: '2019-06-12T10:30:00',
end: '2019-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-06-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2019-06-12T17:30:00'
},
{
title: 'Dinner',
start: '2019-06-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2019-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-06-28'
}
]
});
});
I am trying to convert an old Fullcalendar based web app to V4. I can not get dayClick to fire.
I have this CodePen example: https://codepen.io/anon/pen/YMMEyN?&editable=true&editors=001
The example was initialized via a lik=nk from the FC web site. See below. It brings up a dayGridMonth view by default. It includes the interaction plugin but the dayClick method does not fire, no matter what day cell i click in.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
defaultDate: '2019-04-07',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
dayClick: function(info) {
alert("dayClick ");
},
events: [
{
title: 'All Day Event',
start: '2019-04-01'
},
{
title: 'Long Event',
start: '2019-04-07',
end: '2019-04-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2019-04-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2019-04-16T16:00:00'
},
{
title: 'Conference',
start: '2019-04-11',
end: '2019-04-13'
},
{
title: 'Meeting',
start: '2019-04-12T10:30:00',
end: '2019-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-04-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2019-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-04-28'
}
]
});
calendar.render();
});
I think you meant dateClick instead of dayClick:
dateClick: function(info) {
alert("dateClick");
},
for reference: dateClick() docs
I am using Full Calender JQuery Plugin for displaying my user's daily activity. I have added one drop-down menu when user right click on any cell. But I have an issue with that when we add an event on any cell. When we add an event on any cell then it will create a on the whole row, So I am not able to add open drop-down menu on whole row.
It's displayed on the attached image. On red portion i may not able to open drop-down on right click.
Code
$(document).contextmenu({
delegate: ".hasmenu",
autoFocus: true,
preventContextMenuForPopup: true,
preventSelect: true,
taphold: true,
menu: [{
title: "Block Date",
cmd: "block",
uiIcon: ""
}],
// Handle menu selection to implement a fake-clipboard
select: function (event, ui) {
// Block Date Code
},
// Implement the beforeOpen callback to dynamically change the entries
beforeOpen: function (event, ui) {
// Optionally return false, to prevent opening the menu now
}
});
$('#my-calendar').fullCalendar({
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'List'
},
header: {
left: 'month,basicWeek,basicDay',
center: 'prev, title, next',
right: 'month,basicWeek,basicDay'
},
timeFormat: 'H:mm',
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
eventClick: function(event, jsEvent, view) {
// Code for display popup for event
},
dayRender: function (day, cell) {
// Code for add hasmenu class for open context menu on right click
},
events: [
{
title: 'All Day Event',
start: '2017-07-01',
color: '#000'
},
{
title: 'Long Event',
start: '2017-07-07',
end: '2017-07-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-07-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-07-16T16:00:00'
},
{
title: 'Conference',
start: '2017-07-11',
end: '2017-07-13'
},
{
title: 'Meeting',
start: '2017-07-12T10:30:00',
end: '2017-07-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-07-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-07-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-07-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-07-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-07-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-07-28'
}
]
});
DEMO
I am doing the fullcalendar and i was able to create it properly the demo above is exactly like what i have done so far. I wanted to add new function on the calendar on the demo if you add event and refresh the page the added event is gone. I wanted to save the event into the database so that if you refresh it it will still be there and also i can delete old events.
The default events are added like
$('#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'
}
]
});
});
I want to be able to capture the data in the alert box when a date is clicked but i cant find where it is located.
I need to capture the text from that alert box so that i can store it in database after clicking ok.
Im still trying to read the documentation to find where i can get the text and store it in database
The Documentation is found here
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');
}
This is the part where the text is being get the variable title is the data from the alert which will be the title of the event.