I have a calendar that shows different information on the month view and day view. I'd like to be able to allow the user to click into a day, then have the day show the specifics of each event. This is what I currently have below.
$('#calendar').fullCalendar({
// put your options and callbacks here
height: 750,
header: {
left: 'prev,next today ',
center: 'title',
right: 'month'
},
dayClick: function(date, jsEvent, view) {
},
displayEventTime: false,
events: function(start, end, timezone, callback) {
$.ajax({
type: 'POST',
url: 'WebServices/CalendarAtAGlanceWebService.asmx/GetCalendarSessions',
data: JSON.stringify({ date: $('#calendar').fullCalendar('getDate') }),
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = [];
$(doc.d).each(function () {
events.push({
title: $(this).attr('EventName'),
start: $(this).attr('StartDate'), // will be parsed
description: $(this).attr("EventDescription")
});
});
callback(events);
}
});
},
eventRender: function (event, element) {
element.find('.fc-title').append("<br/>" + event.description);
}
});
Full Calendar This is what the image looks like on the month view.
Make your dayClick function the following:
dayClick: function(date, jsEvent, view)
{
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('changeView', agendaDay);
}
This will change the view to the day view of the clicked date when the user clicks on a day in month view. Then you just need to change your eventRender
logic to only display the description when in day view:
eventRender: function (event, element)
{
if($('#calendar').fullCalendar('getView').name == "agendaDay")
{
element.find('.fc-title').append("<br/>" + event.description);
}
}
This will make the description only appear for the events in day view. This means that you will see titles only in month view, and clicking on a day will show a view of the day's events with more detail.
Related
I'm working with FullCalendar ,i dipslaying a month view and when i click on an event the view changing for 'agenda week'.
eventClick: function(event, jsEvent, view) {
$("#callendar").fullCalendar('gotoDate', event.start.format('h:mm:ss a'));
$("#calendar").fullCalendar('changeView', 'agendaWeek');
$("#calendar").fullCalendar( {
eventSources: [
{
events: function(start, end, timezone, callback) {
$.ajax({
url: 'calendar/get_passation',
dataType: 'json',
data: {
idEvent: event.id
},
success: 'ok'
});
}
}
],
});
But on the agenda week view ,the hours of day wont appear
see
enter image description here
I want to filter events by changing a select option, but I'm not sure how. Some help please(I want to clarify that this is the first time I use Json and FullCalendar)
Example:
Controller cCalendar
public function geteventos(){
$rut_usu = $this->input->post('rut_usu');
$r = $this->mCalendar->geteventos($rut_usu);
echo json_encode($r);
}
Model mCalendar
public function geteventos($rut_usu){
$this->db->select('CONCAT(estudiantes.pnombre," ", estudiantes.apellido_pa," ", estudiantes.apellido_ma,", ",motivos_citas.descripcion_mot) As title ,citas.id_ci id, citas.fecha_ini start, citas.fecha_ter end');
$this->db->from('citas');
$this->db->join('estudiantes', 'citas.rut_estu = estudiantes.rut_estu');
$this->db->join('motivos_citas','citas.id_mot = motivos_citas.id_mot');
$this->db->join('usuarios','citas.rut_usu = usuarios.rut_usu');
$this->db->where('usuarios.rut_usu',$rut_usu);
return $this->db->get()->result();
}
Javascript
$("#rut_usu").change(function(){
rut_usu = $('#rut_usu').val();
$.post('<?php echo base_url();?>cCalendar/geteventos',
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: new Date(),
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
events: $.parseJSON(data)
});
}));
Your controller and modal is not any changes.
Only changes in js:
Create new javascript function:
function getEvents(rut_usu)
{
$('#calendar').fullCalendar( 'removeEvents');
$.ajax({
type:"GET",
url: "<?=base_url();?>cCalendar/geteventos",
dataType: 'json',
data: {rut_usu:rut_usu },
success: function(data){
$.each(data, function(index, event){
$('#calendar').fullCalendar('renderEvent', event);
});
}
});
}
Call this function into on change dropdown event:
<select id="rut_usu" OnChange="getEvents(this.value);">
-----
</select>
Render Event when change select option.
I am using the fullCalendar library in Visual Studio 2015. I am having trouble populating events from an AJAX command. No events are populating on the calendar. If I pass only one datetime and set allDay = true, it will populate the event. I need it to work with time as well and ave multiple events per day.
JS Code:
$(document).ready(function () {
$(".calendar").fullCalendar
({
header: {
left: 'month,basicWeek,basicDay,today',
center: 'title',
right: 'prev,next'
},
weekends: false,
eventLimit: true,
theme: true,
editable: false,
fixedWeekCount: false,
events: function(start, end, timezone, callback)
{$.ajax
({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Calendar/GetCalendarEvents",
dataType: 'json',
success: function (data)
{
var events = [];
$.each(data, function (index, value) {
events.push({
id: value['id'],
title: value['title'],
date: value['date']
//all data
});
console.log(value)
});
callback(events);
},
error: function (xhr, err) {
alert("ERROR! - readyState: " + xhr.readyState + "<br/>status: " + xhr.status + "<br/>responseText: " + xhr.responseText);
}
});
} });})
Note: The above code was one of may attempts to get it working. I have tried coding it differently before.
Controller Code:
public ActionResult GetCalendarEvents()
{
var events = new List<VMCalendarEvents>();
var db_events = db.PatientVisits.ToList();
foreach(var e in db_events)
{
DateTime visit_start = Convert.ToDateTime(e.VisitStart);
DateTime visit_end = Convert.ToDateTime(e.VisitEnd);
var calEvent = new VMCalendarEvents
{
id = e.PatientVisitID.ToString(),
title = "Placeholder Title" + e.PatientVisitID.ToString(),
date = visit_start.ToShortDateString(),
start = visit_start.ToString(),
end = visit_end.ToString(),
editable = true,
allDay = false
};
events.Add(calEvent);
}
var rows = events.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);}
Controller Code Output
JS Objects from Controller
EDIT: Problem Solved
So after some investigating I decided to use Razor in MVC to solve the problem. Instead of writing it into a seperate JS file, I put it into a header in the html file. By implementing the code below I was able to get the objects in the date formats of (yyyy-MM-ddTHH:dd & MM/dd/yyyy hh:mm tt):
$(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2017-06-12',
editable: true,
events: '#Url.Action("GetCalendarEvents", "Calendar")',
});
});
I called the Controller using the URL Action command and return the JSON data as a ActionResult.
Fullcalendar might not like your slashes '/' in your date fields. Try hyphens '-' instead.
The documentation (https://fullcalendar.io/docs/utilities/Moment/) is more detailed about what formats for date/time work.
For reference, here is my fullcalendar code using JSON from AJAX (note that my events do not have an end time, but this was by choice):
{
$.ajax({
url: 'example.json',
dataType: 'json',
success: function(doc) {
var events = [];
$.each(doc, function(index, element) {
events.push({
title: element.title,
start: element.time,
url: element.url,
});
});
callback(events);
}
}) //ajax
}
And the JSON file (example.json):
[
{"time": "2017-06-06 09:00:00", "title": "Get It Done in June ", "url": "http://example.org"},
{"time": "2017-06-07 14:00:00", "title": "Fighting Imposter Syndrome for Dissertating Students ", "url": "http://example.com"},
{"time": "2017-06-14 14:00:00", "title": "Entering into the Academic Conversation", "url": "http://example.biz"}
]
In FullCalendar, I want to create a bootstrap Modal on click of a custom button.I do not know how to do it.
I have tried and kept a prompt box, but it is not my requirement. Help me how to pop up a modal on click of the button click.
The following is my code:-
<script>
$(document).ready(function() {
$.ajax({
url: "calendar/show_holidays",
type: 'POST', // Send post data
data: 'type=fetch',
async: true,
success: function(s){
holidays =s;
// holidays = '['+s+']';
//alert(holidays);
$('#calendar').fullCalendar('addEventSource', JSON.parse(holidays));
}
});
$('#calendar').fullCalendar({
customButtons: {
EventButton: {
text:'Add Event',
click:function(event, jsEvent, view){
console.log(event.id);
var title = prompt('Event Title:', event.title, { buttons: { Ok: true, Cancel: false} });
if (title){
event.title = title;
console.log('type=changetitle&title='+title+'&eventid='+event.id);
$.ajax({
url: '/calendar/show_holidays',
data: 'type=changetitle&title='+title+'&eventid='+event.id,
type: 'POST',
dataType: 'json',
success: function(response){
if(response.status == 'success')
$('#calendar').fullCalendar('updateEvent',event);
},
error: function(e){
alert('Error processing your request: '+e.responseText);
}
});
}
}
}
},
utc: true,
header: {
left: 'prev,next today EventButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
// change the border color just for fun
$(this).css('border-color', 'red');
},
eventAfterRender: function(event, element, view) {
element.append(event.title);
}
});
//$('#calendar').fullCalendar('addEventSource', jsonEvents);
});
</script>
In my html code i have added this :-
<div id='calendar'></div>
using a function on "events", i can't display my events, but if i use the string generated in console from using console.log of the same return variable, i can display my events. Why?
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// page is now ready, initialize the calendar...
var calendar = $('#calendar');
calendar.fullCalendar({
// put your options and callbacks here
'theme': false,
'header': {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
'weekends': false,
'defaultView': 'agendaDay',
axisFormat: 'HH:mm',
timeFormat: {
// for agendaWeek and agendaDay
agenda: 'H:mm{ - H:mm}', // 5:00 - 6:30
// for all other views
'': 'H(:mm)t' // 7p
},
minTime: 8,
ignoreTimezone: true,
editable: true,
selectable: true,
selectHelper: true,
select: function (startDate, endDate, allDay, jsEvent, view) {
/*
after selection user will be promted for enter title for event.
*/
var title = prompt('Event Title:');
/*
if title is enterd calendar will add title and event into fullCalendar.
*/
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: startDate,
end: endDate,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
eventDrop: function (event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
events: function getjson() {
var out;
$.ajax({
url: 'http://localhost:8000/calendar/api/events/events/',
type: 'GET',
async: false,
success: function (data) {
out = JSON.stringify(data['objects']);
},
error: function () {
alert('errore');
}
});
console.log('hshshshshsh', out);
return out;
}
i'm using a json resource that displays event objects
You can enter the URL directly (as stated here):
calendar.fullCalendar({
events: 'http://localhost:8000/calendar/api/events/events/'
});
Following code is working for me..it may find you useful..just do changes according to your code
events: function (start, end, callback) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Put your url here",
dataType: "json", // datatype returned by the webservice
success: function (data) {
var events = $.map(data.d, function (item, i) {
var event = new Object();
event.id = item.id;
event.start = new Date(item.date);
event.title = item.title;
event.color = item.color;
return event;
});
callback(events);
}, //end of Success function
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("StatusEvents: " + textStatus);
alert("Error: " + errorThrown);
}
}); //end of Ajax Function
} //end of events function
and my json entity is like
[Serializable]
public class Events
{
public int id { get; set; }
public string title { get; set; }
public DateTime date { get; set; }
public string color { get; set; }
}