I created a calendar using fullcalender all the events (tasks) are displaying on it.
Now i want to open a form which display the event's details, how can i taking the event details by clicking on it?
my code:
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2014-09-12T10:30:00',
end: '2014-09-12T12:30:00'
}
]
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
Check the full calendar documentation. Here is the link.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2014-09-12T10:30:00',
end: '2014-09-12T12:30:00'
}
],
eventClick: function(event) {
if (event.title) {
alert(event.title);
}
}
});
Related
When I try to initialize a calendar with anything other than resourceTimelineDay, the nowIndicator doesn't show up in the right place. If I start it with resourceTimelineMonth, it sticks at midnight. If I start it with resourceTimelineWeek, it sticks at the beginning of the hour. If I start it with resourceTimelineDay though, it starts with the correct time, and holds, even if I change the view to week or month view.
I would like to start with month view, and have the nowIndicator show where it is supposed to. This used to work with V3, but now, with V5, it isn't working.
Here is it started with resourceTimelineMonth:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/Phoenix',
nowIndicator: true,
initialView: 'resourceTimelineMonth',
aspectRatio: 1.5,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceAreaHeaderContent: 'Rooms',
resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
});
calendar.render();
});
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>
Here it is started with resourceTimelineDay:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/Phoenix',
nowIndicator: true,
initialView: 'resourceTimelineDay',
aspectRatio: 1.5,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceAreaHeaderContent: 'Rooms',
resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
});
calendar.render();
});
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>
Neither resourceTimelineWeek, nor resourceTimelineMonth work as expected, even if you switch to day view.
This is not how it should be done, in my opinion, but it appears there is no official way to change the behavior of the nowIndicator. In lieu of that, the hack is to start in resourceTimelineDay view and change the view to resourceTimelineWeek or resourceTimelineMonth view immediately after the calendar is rendered.
calendar.render();
calendar.changeView('resourceTimelineMonth');
This is a hack, and hopefully there will be a fix for this in some future release.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/Phoenix',
nowIndicator: true,
initialView: 'resourceTimelineDay',
aspectRatio: 1.5,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceAreaHeaderContent: 'Rooms',
resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
});
calendar.render();
calendar.changeView('resourceTimelineMonth');
});
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>
i created a new MVC asp.Net webpage and for testing i added Fullcalendar 5.1.
For testing i put all the stuff in index.html:
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="~/lib/fullcalendar/main.css" />
<script src="~/lib/fullcalendar/main.js"></script>
<meta charset='utf-8' />
<style>
.fc-sun {
background-color: blue;
}
.fc-sat {
background-color: red;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2020-07-07',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
title: 'All Day Event',
start: '2020-07-01'
},
{
title: 'Long Event',
start: '2020-07-07',
end: '2020-07-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-07-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-07-16T16:00:00'
},
{
title: 'Conference',
start: '2020-07-11',
end: '2020-07-13'
},
{
title: 'Meeting',
start: '2020-07-12T10:30:00',
end: '2020-07-12T12:30:00'
},
{
title: 'Lunch',
start: '2020-07-12T12:00:00'
},
{
title: 'Meeting',
start: '2020-07-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2020-07-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-07-28'
}
]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
But the backcolor wont change :-(
if i put some other variables in like this:
.fc .fc-col-header-cell-cushion { /* needs to be same precedence */
padding-top: 10px; /* an override! */
padding-bottom: 21px; /* an override! */
}
the header padding changes.
What iam doing wrong?
the fiddle is the example: http://jsfiddle.net/rajesh13yadav/nf9whojL/1/
Can you please help me?
EDIT:
As a workaround i use this:
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2020-07-07',
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [1, 2, 3, 4, 5], // Monday - Friday
start: '00:00', // a start time (09am in this example)
end: '00:00', // an end time (6pm in this example)
},
and the style is:
<style>
.fc .fc-non-business {
color: red;
background: green;
opacity: 0.1;
}
</style>
But why i cant set the other properties?
In version 5.1 the classes are .fc-day-sat and fc-day-sun
Setting the background-color for those classes works fine.
I have a "List" view of events coming directly from Google Calendar. The Google Calendar is set to the 'America/Central' Time zone. I need to display the events in 'America/Eastern' Time Zone.
I have found examples, but can't seem to get them to work. I am providing my base code in hopes that someone can help me out.
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.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/3.9.0/gcal.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'list',
defaultDate: '2019-01-20',
duration: {
days: 180
},
header: {
left: '',
center: 'title',
right: ''
},
displayEventTime: true, // don't show the time column in list view
height: 450,
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'REALKEY',
// US Holidays
events: 'REALCALENDAR',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
<style>
#loading {
display: none;
position: absolute;
top: 10px;
right: 10px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
Currently my events are being displayed in just UTC.
I got this figured out.
I had to add both timezone and timezoneParam to get the calendar to adjust the time to the right timezone. Here is my final code with the keys removed.
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.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/3.9.0/gcal.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'list',
defaultDate: '2019-04-01',
timezone: 'America/New_York',
timezoneParam : "America/New_York",
duration: {
days: 7
},
header: {
left: '',
center: '',
right: ''
},
displayEventTime: true, // don't show the time column in list view
height: 450,
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'YOUR_KEY',
// US Holidays
events: 'YOUR_CALENDAR#group.calendar.google.com',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
I am trying to understand full calendar.. i don't know how to use methods like selection or colour. Could any one please give me a example for colour my each event day by different colour .and on clicking over the day tile a message should ask us to add a event.
I had read http://fullcalendar.io/docs/ but can't understand .how to change that.
<link href="~/Content/calendar/fullcalendar.css" rel="stylesheet" />
<link href="~/Content/calendar/fullcalendar.print.css" rel="stylesheet" media='print' />
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<style>
body {
margin: 40px 10px;
padding: 15px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<div id='calendar'></div>
#section scripts{
<script src="~/Scripts/calendar/moment.min.js"></script>
<script src="~/Scripts/calendar/jquery.min.js"></script>
<script src="~/Scripts/calendar/fullcalendar.min.js"></script>
<script src="~/Scripts/calendar/jquery-ui.custom.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar(Duration,'00:30:00');
$('#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');
},
slotDuration:'00:00:15',
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'
}
]
});
});
</script>
}
The following code is used to give colors to different events in fullcalender.
{
title: 'All Day Event',
start: '2015-02-01',
backgroundColor: '#000'
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10',
backgroundColor: '#DDD'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00',
backgroundColor: '#CCC'
},
give a backgroundColor parameter with color code to particular event.
and following code is used, if you want to open a popup for a new event when you click on the event title.
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: '<?php echo $view; ?>',
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$.ajax({
url:"<?php echo site_url("controller/function_name");?>/"+convert_date(start),
cache:false,
data:"event_name="+convert_date(start),
success:function(data){
//alert(data);
if(data=="holiday" || data=="no"){
$( ".modalbox" ).on( "click", function() {
});
//$("#day_"+convert_date(start)).css("background-color","#f00");
$("#event_date").val(start);
summary();
summary_change($("#reminder").val());
//$("#date_of_end").val(convert_date_mdy(start));
//$("#summary_date").val(convert_date_mdy(start));
}
else{
$( ".modalbox" ).on( "click", function() {
});
$( ".modalbox" ).trigger( "click" );
$("#event_date").val(start);
summary();
summary_change($("#reminder").val());
//$("#date_of_end").val(convert_date_mdy(start));
//$("#summary_date").val(convert_date_mdy(start));
}
}
});
$("#addSchedule").submit(function(){
title=$("#shift").val();
if (title!="") {
date=convert($("#event_date").val());
end_date=convert(end);
$("#event_date").val(date);
$("#end_date").val(end_date);
$("#allDay").val(allDay);
calendar.fullCalendar('renderEvent',
{
title: title,
start:$("#event_date").val(),
end: end,
allDay: allDay
},
);
}
$("#holder").hide();
//return false;
});
calendar.fullCalendar('unselect');
},
editable: true,
events: <?php echo $result;?>,
eventClick: function(event) {
$.ajax({
url:"<?php echo site_url("controller/function_name");?>/"+event.event_id,
cache:false,
data:"event_name="+event.title,
success:function(data){
$("#inline1").html(data);
$( ".modalbox1" ).on( "click", function() {
});
$( ".modalbox1" ).trigger( "click" );
}
});
},
});
eventClick parameter will be in act, when you click on particular event on fullcalender.
I have made a PHP script with fullcalendar， It works fine with Chrome,But not in IE6 and Firefox, actually I just follow the documents and demo, I'm puzzled what's wrong ?
The page's URL is http://jiangzuokong.com/cal.php
script like follows:
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: false,
events: [
{
title : '资本主义作为一种历史现象',
start : '2011-3-7',
url : 'http://jiangzuokong.com/forum.php?mod=viewthread&tid=80&from=portal'
},
title : '【在文学馆听讲座】关仁山：乡村社会转型中的文学[北京]',
start : '2011-3-13',
url : 'http://jiangzuokong.com/forum.php?mod=viewthread&tid=104&from=portal'
}, {
title : 'Survival Chinese：Ordering Food[北京]',
start : '2011-3-13',
url : 'http://jiangzuokong.com/forum.php?mod=viewthread&tid=105&from=portal'
}, {
title : '',
start : '',
url : ''
} ]
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>