I created a fullcalendar5, everything works fine, calendar is showing very well, event added successfully, only event showing remains, I want to show beside event an hour, even I add allDay: false ,it not showing.
the image i want
var booking = #json($events);
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'fr',
eventDisplay: 'block',
initialView: 'dayGridMonth',
eventColor: 'orange',
events: booking,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
});
$('#add-event').on("click", function(){
var titre = $('#titre').val();
var datee = $('#date').val();
var comment = $('#comment').val();
$.ajax({
url:"{{ url('/events') }}",
type:"POST",
dataType:'json',
data:{ titre, datee, comment, "_token": "{{ csrf_token() }}" },
success:function(response){
console.log(response);
$('#exampleModal').modal('hide');
calendar.addEvent({
title: titre,
start: datee,
allDay: false
});
},
error:function(error){
console.log(error);
},
});
});
calendar.render();
});
Related
I'm trying to render events on the fullcalendar from the json response,
$.ajax({
url : $("body").attr("data-link")+'/calendar/events',
type : 'post',
dataType: 'json',
success: function(e){
if(e.success){
var events = [];
$.each(e.events,function(index,value){
events.push({
title : value.title,
start : moment(value.start_date).format('YYYY-MM-DD'),
end : moment(value.end_date).format('YYYY-MM-DD'),
});
});
calendar.fullCalendar( 'renderEvent', events , true);
console.log(events);
}
}
});
here's my fullcalendar set up
var calendar = $('#calendar').fullCalendar({
customButtons: {
myCustomButton: {
text: 'Add Event',
click: function() {
}
}
},
header: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable : false,
eventLimit: true,
eventClick: function(calEvent, jsEvent, view, element) {
},
eventRender: function(event, element) {
element.attr("data-id",event.id);
},
});
In the console log.
and then it gives me this error,
Uncaught TypeError: Cannot read property 'hasTime' of undefined
any ideas, help please?
You could either call renderEvent for each event in events or add entire array as datasource
$.ajax({
url : $("body").attr("data-link")+'/calendar/events',
type : 'post',
dataType: 'json',
success: function(e){
if(e.success){
var events = [];
$.each(e.events,function(index,value){
events.push({
title : value.title,
start : moment(value.start_date).format('YYYY-MM-DD'),
end : moment(value.end_date).format('YYYY-MM-DD'),
});
});
calendar.fullCalendar( 'addEventSource', events);
}
}
});
I needed to make Google calendars look nice for a client, so I used Fullcalendar and it now looks great, thanks!
I have one problem though:
When I click on an event, the details display the GMT time. I tried a few things, but I am definitely not a developer, so I need help :)
Any help would be greatly appreciated! Here is my js code so far:
$(document).ready(function() {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
googleCalendarApiKey: 'my api key',
events: 'my event',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=600,height=400');
return false;
$scope.start = event;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
$(document).ready(function() {
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: 'my calendar xml link',
dataType: 'xml',
data: {
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
},
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
googleCalendarApiKey: 'my api key',
events: 'my calendar id',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=600,height=400');
return false;
$scope.start = event;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
Hi I'm using Javascript for loop to generate a string on looping C# list but I'm getting Error
Error 4 The name 'eventList' does not exist in the current context
My complete code is here
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'ProjectedYieldCalender.aspx/GetData',
data: '{}',
success:
function (data) {
var eventList = data.d;
alert(eventList.length);
// eventList = demo(eventList);
initCalendar(eventList);
}
});
});
function initCalendar(eventList) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
//defaultDate: '2014-08-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
<% for (var i = 0; i < eventList.count ; i++) { %>
{
title : eventList[<%=i%>].name,
start : eventList[<%=i%>].date
}
<% }%>
]
});
}
</script>
Cany any one please let me know where am I doing mistake and please let me know how to use the count of list in for loop . I'm getting proper result if I place some static value in for loop like 'i<5' in stead of 'i < eventList.Count'
You have to do like this. You are trying to access javascript array in asp.net code so it gives you that error.
function initCalendar(eventList) {
var events = [];
for(var i=0;i<eventList.length;i++)
{
events.push({ title : eventList[i].name , start: eventList[i].date });
}
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
//defaultDate: '2014-08-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
}
FullCalendar v2.2.5, I want to use my JSON generating script to pull data only for the visible area of the calendar as mentioned in a few other questions.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '2015-01-06',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
//events: {
// url: 'instant-tools.cgi',
// type: 'POST',
// data: {
// events: 1,
// pending: 1,
// from: '2014-01-01',
// to: '2016-12-31',
// }
// },
viewRender: function(view, element) {
var events_slice = new Object();
events_slice.eventSources = [
{
url: 'instant-tools.cgi',
type: 'POST',
data: { events: 1, pending: 1, from: '2014-01-01', to: '2016-12-31' }
}
];
$('#calendar').fullCalendar('addEventSource', events_slice);
//$('#calendar').fullCalendar('renderEvents');
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});
The commented out events definition works (when I use it) but the viewRender one does not. Before you ask viewRender does get triggered. I get no errors in the console and no events displayed. My script is not called at all. I know I have the dates hardcoded right now but I will use view.intervalStart and view.intervalEnd once I verify I get a similar result. Having $('#calendar').fullCalendar('renderEvents'); in there makes no difference, also toggling lazyFetching does not make a difference. Not a JS coder so I hope I'm just being silly somewhere.
in the event property you need to call the function
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '$today',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
events: function(start, end, timezone, callback) {
$.ajax({
url: 'instant-tools.cgi',
data: {
events: 1,
pending: 1,
from: '2014-01-01',
to: '2016-12-31',
},
success: function(doc) {
var obj = jQuery.parseJSON(doc);
var events = [];
$.each(obj, function(index, value) {
events.push({
id: value['id'],
//all data
});
//console.log(value)
});
callback(events);
},
error: function(e, x, y) {
console.log(e);
console.log(x);
console.log(y);
}
});
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});
Seems that on several entries, provides me with a link to show the remain items "+## more".
Currently when clicking on link to expand and view all items, its returning an empty dialogue.
The versión fullCalendar is: 2.1.1
The problem is with these propertys: allDayDefault: true, or in event allDay:true, when clicking on link to expand and view all items.
Im started the calendar with:
<script type="text/javascript">
$('#calendar').fullCalendar
({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
selectable: true,
selectHelper: true,
allDayDefault: true,
eventSources: [getCalData()],
});
function getCalData() {
var urlAux = baseUrl + '/pagweb/WSAgenda.asmx/test';
var source = [{}];
$.ajax({
async: false,
type: "POST",
contentType: "application/json",
data: "{}",
url: urlAux,
dataType: "json",
success: function (data) {
if (data.d != null) {
for (var i = 0; i < data.d.length; i++) {
source.push({
id: data.d[i].id,
start: new Date(data.d[i].start),
end: new Date(data.d[i].end),
title: data.d[i].title,
className: data.d[i].color,
});
};
}
else {
return null;
}
}
});
return source;
}
});
</script>
getCalData is a json request.