FullCalendar Won't Show - javascript

$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var booking = #json($events);
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, agendaWeek, agendaDay',
},
});
});
Whenever I implement the code above, the full calendar doesn't show but when I comment out var booking = #json($events);, the full calendar appears.
I tried the code below and it still didn't work:
$(document).ready(function () {
var events = JSON.parse('#json($events)');
console.log(events)
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
})
});
Any help is greatly appreciated.

Related

Is there a way to access variable from a js function is chrome extension?

So my university have this activity calender in their students portal but it is quite messy, I find this in the page
<script>
$(function () {
/* initialize the calendar
-----------------------------------------------------------------*/
var JsonData = [{"Semester":"Fall 2020","title":"CS602: Assignment# 1","start":"2020,11,27","end":"2020,12,05","backgroundColor":"linea ...
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
events: JsonData,
editable: false,
droppable: false
});
});
</script>
Is there a way to get that JSON in my chrome extension so I can do something with it there? Thanks in advance!

How to create an event calendar in mvc

I want to do Event/Scheduler calendar in asp.net MVC. So far I've written this code for the database table in , but something doesn't work.
The controller code :
public ActionResult Index()
{
return View();
}
public JsonResult GetEvents()
{
var events = db.MedicationTrackers.ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
and the View-Index code
#model IEnumerable<LICENTA.Database.MedicationTracker>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<scripts src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></scripts>
<script>
$(document).ready(function () {
var events = [];
$.ajax({
type: "GET",
url: "/MedicationTrackers/GetEvents",
success: function (data) {
$.each(data, function(i,v){ //i=index v=value
events.push({
title: v.IdMember,
description: v.IdMedication,
start: moment(v.Start),
end: v.Stop != null? moment(v.End):null,
status: v.Status
})
})
GenerateCalendar(events);
},
error: function (error) {
alert("Error occured!!")
}
})
})
function GenerateCalendar(events) {
$('calender').fullCalendar('destroy'); //clear first
$('calender').fullCalendar({
contentheight: 400,
defaultdate: new date(),
timeformat: 'h(:mn)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month, basicweek, basicday, agenda'
},
eventlimit: true,
eventcolor: '#378006',
events: events
}}
</script>
When I run the project the ajax error appear. I tried to test just the calendar to see if it works but it does not appear on the page.
A calender is not an html element. You need to add a div to your view with an id:
<div id="calendar"><div>
And update your javascript:
function GenerateCalendar(events) {
$('#calendar').fullCalendar('destroy'); //clear first
$('#calendar').fullCalendar({
contentheight: 400,
defaultdate: new date(),
timeformat: 'h(:mn)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month, basicweek, basicday, agenda'
},
eventlimit: true,
eventcolor: '#378006',
events: events
});
}

How to use a loop inside jquery Fullcalendar events?

Hi i'm trying to loop inside the jquery Fullcalendar events, but i don't know why this is not working :
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: //My loop here for title: birthdaysList.name , start birthdaysList.date
});
});
OK first of all, you can't do a loop inside envents: , you have to make an array and then call it from the envents: , like this:
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
var events = []; //The array
for(var i =0; i < birthdaysList.length; i++)
{events.push( {title: birthdaysList[i].name , start: birthdaysList[i].date})}
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: events
});
});

fullcalendar - How to load all events on calendar using ajax

I want to load all events in full calendar using Ajax when the page loads.I am getting response from Ajax.But the event is not added in Full calendar.
here is my jquery code
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-06-12',
editable: true,
events: function(start,end,callback){
var mydata = {
action: "fw_ajax_callback",
subaction: "get_myappointments",
};
$.ajax({
url :ajax_url,
type: 'POST',
data: mydata,
dataType: 'json',
success:function(appointments){
var events = [];
if(!!appointments){
$.map( appointments, function( r ) {
events.push({
title: r.title,
start: r.start,
end: r.start
});
});
}
callback(events);
}
})
}
});
From my console I found an error stating callback is not a function.Please help me i am a newbie.
I think you are making what is supposed to be easy look very complex: I have added a JSFiddle Link to show you how it work.
$('#calendar').fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment().format("YYYY-MM-DD"),
editable: true,
events: {
url: 'http://www.json-generator.com/api/json/get/ccUKVDYErS?indent=2',
error: function() {
$('#script-warning').show();
},
success: function(){
alert("successful: You can now do your stuff here. You dont need ajax. Full Calendar will do the ajax call OK? ");
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});

bootstrap popover lies under cells in fullCalendar?

I am using fullCalendar with bootstrap popovers. The goal is to append a form for adding new event inside the popovers. The code does make the popover appears above the cells, however, on clicking the popovers, the cells underneath it are selected rather than the popovers themselves.
Here is my code:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
height: height,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function( date, allDay, jsEvent, view ){
if (view.name=='month'){
$(this).children().popover({
placement: 'right',
content: function() {return $("#popover-content").html();},
html : true, container: 'body'
});
$('.popover.in').remove();
$(this).children().popover('show');
..........
and html
<div id="popover-content" class="hide">
<form>
<input id="easyeventtitle" />
</form>
</div>
This is how it looks like
I have tried z-index to popovers, instead, they do not appear at all!
Please help! Thank you for your time!
Edit: here is the link to test it
Try this code
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
events: '/events.json',
editable: true,
selectable: true,
dayClick: function(start, end, allDay, jsEvent, view) {
$(this).popover({
html: true,
placement: 'right',
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
},
html: true,
container: 'body'
});
$(this).popover('toggle');
}
});
});

Categories