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.
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 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'
}
]
});
});
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'
}
]
});