I want to know if is possible to get a list or array or something with events of one day by clicking that day in fullcalendar.
Now I get the events from google calendar, if I need to make a query each time I want to get events of one day, it will be so hard for connections. I guess it has to be possible since you already have the events for rendering them.
One user ask me for code:
dayClick: function(date, allDay, jsEvent, view) {
console.log(date);
console.log(allDay);
console.log(jsEvent);
console.log(view);
if (allDay) {
// alert('Clicked on the entire day: ' + jsEvent);
}
},
eventClick: function(event) {
if (event.url) {
return false;
}
}
I can't understand why someone voted me negative. I made a question, someone ask for code, I put code but I EXPLAINED why I have no more code, and -1 vote? I can't understand it.
I think you could do something like
dayClick: function(date, allDay, jsEvent, view) {
var dayEvents = $('yourSelector').fullCalendar( 'clientEvents' function(event){
return event.start.setHours(0, 0, 0, 0) === date.setHours(0, 0, 0, 0);
//or some way to compare that is the same day
//I recommend momentjs lib ex moment(event.start).isSame(date,'day')
});
}
What I suggest is to query the client events and filter it checking if its the same day
Related
I am trying to implement a Fullcalendar functionality like so: an external event is dragged to the calendar, then the event is saved to the database via ajax, with its title, start and end dates.
I did achieve making the event title and start date/time to be saved to the DB, however I cannot fix the following couple of issues:
Currently, the end date/time saved to the DB is the same as the start date/time.
How do I make the end date to be 24h after the start date for all day events?
How do I get the exact start and end dates for a fixed duration event?
Once the event is dragged and saved to the DB, I cannot drag-drop any more events until I hit F5
My HML is the following:
<div id='external-events'>
<div class="fc-events-container">
<div>All Day Events</div>
<div class='fc-event' data-color='#28A745'>All Day Event</div>
<div>Fixed Duration Events</div>
<div class='fc-event' data-color='#50C1E9'>Event From 8am till 5 pm</div>
</div>
</div>
JQuery:
$('#external-drag').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
defaultDate: new Date(),
selectable: true,
events: "../../ajax/get_events.php",
drop: function( date, allDay, jsEvent, ui ) {
var start = date.format();
var end = date.format();
var title = $.trim($(this).text());
$.ajax({
url: '../../ajax/add_event.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert('Added Successfully');
},
error: function() {
alert('Error');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true
);
}
});
Firstly, some background context to what you're experiencing: although you've labelled your second event as "from 8 to 5pm", that has no actual practical effect. If you drop either of your draggable items onto a time-aware calendar view (e.g. week view) then it will gain a start date and time. On a view such as month, which has no concept of specific times of day, then it will just gain a start date, without a time attached.
However in both cases, there is no end date. Once you add the event to the calendar via renderEvent, then fullCalendar will assign it a default duration (as per the
defaultAllDayEventDuration or defaultTimedEventDuration settings, as appropriate). You can use that to work out the notional end date (although the event object doesn't actually have its end property set unless you set forceEventDuration to true).
Now to a solution:
If you want to control it so that specific dragged items have pre-defined times, you would have to specify the time data in the data- properties of the relevant draggable items. Then you need to get those values in your drop callback, the same way as you do with the title, and use them when creating your event.
It took a bit of fiddling to get to this point, especially with the moment objects, but it now appears to do what you want - as far as I understand it.
drop: function(date, jsEvent, ui) {
var element = $(this);
var title = $.trim(element.text());
var color = element.data("color");
var start = moment(date.format()); //lose the extended fullCalendar moment with its "ambiguously-timed" feature, which gets in the way here
var end = start.clone();
var allDay = true;
console.log(start.format(), end.format());
if (typeof element.data("starttime") !== 'undefined') {
//timed events
var starttime = moment.duration(element.data("starttime"));
var endtime = moment.duration(element.data("endtime"));
start.set({ "hour": starttime.hours(), "minute": starttime.minutes()});
end.set({ "hour": endtime.hours(), "minute": endtime.minutes()});
allDay = false;
console.log(starttime.hours());
} else {
//allday events
end.add({ days: 1 });
}
console.log("title=" + title + "&start=" + start.format() + "&end=" + end.format());
$.ajax({
url: '../../ajax/add_event.php',
data: 'title='+ title+'&start='+ start.format() +'&end='+ end.format(),
type: "POST",
success: function(json) {
alert('Added Successfully');
},
error: function() {
alert('Error');
}
});
calendar.fullCalendar(
"renderEvent",
{
title: title,
start: start,
end: end,
color: color,
allDay: allDay
},
true
);
}
Demo: https://codepen.io/ADyson82/pen/GRRXwRL?editors=1010
N.B. Note that if a user drags an event onto a time-aware view like the week view, it will still create the events exactly as per the settings in the draggable, and will ignore whatever time of day they dropped it on. It's possible this could be confusing or irritating to some users - but I guess it depends what you're trying to achieve exactly.
P.S. I don't know where you got the idea that the drop callback has an allDay parameter. It's clearly not there in the documentation. You can't use that, so I've removed it in my version.
I'm developing a Calendar application via fullcalendar.
I'm currently working on a mini sized calendar. The mini calendar will not display the events.
I'm trying to use tooltip instead. so when the user will mouseover a specific daycell - all the events of the specific daycell will be displayed via tooltip. (this is my issue)
I been working on this issue for almost two days now.
unfortunately, full calendar only offers "eventMouseover". (no dayMouseover available).
Also, using $(".fc-day").hover is not really the best way to go because it is working only when hovering the bottom of the cell.
there is no documentation for this on the web so far.
Anybody knows which is the best way to Tackle an issue?
here is my code so far:
$("#miniCalendar").fullCalendar({
defaultDate: currentDate,
viewRender: function (view, element)
{
monthStart = view.intervalStart.format("YYYY-MM-DD");
monthEnd = view.intervalEnd.subtract(1, "days");
monthEnd = view.intervalEnd.format("YYYY-MM-DD");
mStart = view.intervalStart.format("M");
yStart = view.intervalStart.format("YYYY");
},
events: function (start, end, timezone, callback) { //custom events function to be called every time the view changes
$.ajax({
url: getMonthDataUrl,
type: "post",
data: {
startDate: monthStart,
endDate: monthEnd,
custom_config: Config
},
error: function () {
//alert("there was an error while fetching events!");
},
success: function (data) {
calendarData = data;
console.log(calendarData);
thingsToDoAfterWeLoadCalendarData(calendarData);
callback(eventsJsonArray); //pass the event data to fullCalendar via the supplied callback function
}
});
},
fixedWeekCount: false,
dayRender:
function (date, cell) {
//the events are loaded vie eventAfterAllRender function
//eventAfterAllRender takes time to load. so we need dayRender function in order to give the calendar default colors until the real colors are loaded
// the default colors spouse to look like the correct colors. this is needed for a better looking calendar while loading new events
if (!cell.hasClass("fc-other-month")) {
//that means this is a cell of this current month (becuase only cells that belong to other month have the "fc-other-month" class
var weekDay = date.format("dddd");
if (weekDay == "Saturday" || weekDay == "Friday") {
cell.css("background-color", "#edf5f9");
} else{
//regular days
cell.css("background-color", "#f7fafc");
}
} else{
//cells that belong to the other months
$(".fc-other-month").css("background-color", "#ffffff");
}
},
eventAfterAllRender:
(function(view, event, element) {
let viewDisplay = $("#miniCalendar").fullCalendar("getView");
if (viewDisplay.name == "month") { //checking if this the month view. this is needed for better display of the week\day view (if we ever want to use it)
$(".fc-day:not(.fc-other-month)").each(function(index, element) {
//loop through each current month day cell
$(this).empty(); //removing old icons in case they are displayed
let cellDate = moment($(this).data("date")).format("YYYY-M-D"); // "YYYY-M-D" date format is the key in the json_backgrundColorBigCalendar array
$(this).css("background-color", json_backgrundColorBigCalendar[cellDate]); //set the background colour of the cell from the json_backgrundColorBigCalendar array.
});
}
$(".fc-other-month").css("background-color", "#ffffff"); //days that belong to other month gets a color background that will show this days are irrelevant
}),
dayClick: function(date, jsEvent, view) {
window.location = fullCalendarUrl;
},
});
I dont really know if there is a "fullcalendar-way" doing this, but why can't you use your hover event listener and just also let it listen on fc-day-top hover?
$(".fc-day, .fc-day-top").hover(function(e) {
console.log($(e.currentTarget).data("date"));
});
This will also work if you hover the top of a day cell.
Update:
To get the events on hover use this:
var $calendar = $("#calendar");
$(".fc-day, .fc-day-top").hover(function(e) {
var date = moment.utc($(e.currentTarget).data("date"));
var events = $calendar.fullCalendar("clientEvents", function(event) { return event.start.startOf("day").isSame(date); });
console.log(events);
});
(Tested on the calendar on the fullcalendar main site).
Of course you have to change the jQuery selector of the calendar (#calendar) as it is in your code.
I've never seen full calendar before, but if I understand correctly you want to bind a hover function to custom days of the calendar. Is that correct?
If so you can simply select days of the calendar with their "data-date" attribute. So something like the code below would let you specify a hover function for a desired day:
$("[data-date='2017-10-10']").hover(function(e) {
console.log("You moused over 10/10/2017!");
});
I am fairly new to angular I am trying to implement a calendar using ui-calendar. So far I have been able to display a very basic calendar and some events on it.
Now I need to be able to click on a day and display the detailed events on a side tab. I seem to be lost on how to achieve this clicking day thing. This may seems very naive, I thought i'd find the html for each day cell on the calendar, and then it would be as easy as attaching a ng-click to it. But I cant seem to find any template where the html for calendar is. All I can see is the directive, which doesnt help much. I dont understand jquery at all, so I am really struggling to find any answers too.
To sum things up, I just want to know how to make a day on calendar clickable.
Thanks in advance.
code:
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
dayClick: function(date, jsEvent, view) {
console.log("inside dayClick");
alert('Clicked on: ' + date.format());
var events = myCalendar.fullCalendar('clientEvents', function(event) {
return event.start.isSame(date) || event.end.isSame(date) || date.isBetween(event.start, event.end); // Will return all events starting/ending on this date or overlapping this date
});
}
}
};
In your configuration variable you can add a dayClick callback , in this callback you can do something like this:
dayClick: function( date, jsEvent, view ) {
var events = myCalendar.fullCalendar('clientEvents', function(event) {
return event.start.isSame(date) || event.end.isSame(date) || date.isBetween(event.start, event.end); // Will return all events starting/ending on this date or overlapping this date
});
}
This will return all the events that either are on this day or overlap it.
FullCalendar docs can be found here.
I'm a bit lost where is the proper place to make this with the Full Calendar documentation and need some fiddle to point me into the right way. When my calendar loads the events, before them show up on the calendar, I need to make a ajax call into a wordpress db which should return a date of a post. Each post is an event on the calendar. Depending on the response of the database, if the post date is in future time than the current time, then the calendar should show this event in an specific color, if it is past or current time it should be another different specific color.
So basically, before each event renders on the calendar I need to trigger an ajax call for each of them and evaluate the data returned to apply them the right color for past/current events and future events.
Someone experienced with Full Calendar could point me a fiddle with an example how is this done within the Full Calendar documentation?
This is the code I went so far. I am looking to stay in the loop with the calendar refetchEvents and be able to fetch with ajax in the background data from the posts of a WordPress website to use it on the next refetchEvents trigger and so on.
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var webData = null; //array() data
$('#calendar-holder').fullCalendar({
eventRender: function(event, element, webData) {
var dataHoje = new Date();
/*
Use webData data taken with ajax on eventAfterAllRender callback option
inside this conditional statements to draw on the event box
colors and text values depending on the status and date of the post returned.
*/
if (event.start < dataHoje && event.end > dataHoje) {
element.css('background-color', '#FFB347');
element.find('.fc-event-inner').append('<span class="fc-event-status">ON AIR</span>');
} else if (event.start < dataHoje && event.end < dataHoje) {
element.css('background-color', '#77DD77');
element.find('.fc-event-inner').append('<span class="fc-event-status">Published</span>');
} else if (event.start > dataHoje && event.end > dataHoje) {
element.css('background-color', '#AEC6CF');
element.find('.fc-event-inner').append('<span class="fc-event-status">Schedued</span>');
}
},
eventAfterAllRender: function () {
webData = '(AJAX CALL TO WEBSITE POSTS I THINK SHOULD GO HERE)';
console.log(webData);
},
eventColor: '#378006',
complete: function() {
},
defaultView: 'basicDay',
googleCalendarApiKey: 'AIzaSyCtEQZsFtsY41kJ1Av5FftgX9kdfkHKH',
events: {
googleCalendarId: 'mywebsite.com_l84tadr5fulc7j0628g3g6oj3k#group.calendar.google.com'
},
header: {
left: 'prev, next',
center: 'title',
right: 'basicDay, basicWeek, month, '
},
lazyFetching: true,
timeFormat: {
agenda: 'h:mmt', // 5:00 - 6:30
'': 'h:mmt' // 7p
},
weekNumbers: false,
lang: 'en',
eventSources: [
{
url: Routing.generate('fullcalendar_loader'),
type: 'POST',
data: {
},
error: function() {
}
}
]
});
});
var refreshRate;
function reloadTime() {
refreshRate = setTimeout(reloadPage, 5000);
}
function reloadPage() {
$("#calendar-holder").fullCalendar("refetchEvents");
reloadTime();
}
$( document ).ready(function() {
reloadTime();
});
Changing the color:
The way you did it works, but the easiest way is to do it in eventDataTransform. Like so:
eventDataTransform: function(eventData){
if(eventData.end.isBefore(moment())){
eventData.color = "black";
}else{
eventData.color = "green";
}
return eventData;
},
Color Demo
Check if event exists
You didn't mention exactly what to do if the database returns false, but I'll assume you don't want nonexistent events rendered.
Since the source for your events is google calendar, this is actually kind of tricky. Normally, you would use the custom events function and do two ajax calls in it (one for the events and one for checking if they are valid). But you can't do this with google cal events.
So instead we will use eventDataTransform and only display the events after we know they exist.
eventDataTransform: function(eventData){
eventData.display = false; //Don't display until we check the server
eventData._uid = idCounter++; //unique ID. Don't need this if they already have unique IDs
ajaxCall(eventData); //check the server (will retroactively update the event to be displayed)
if(eventData.start.isBefore(moment())){ /*...*/ } //colors
return eventData;
},
The top of your eventRender callback should look like:
eventRender: function(event,element){
if(!event.display){ //Render only if the event exists
return false; //return false to stop the event from rendering.
}
/*...your other render code if you have any*/
}
Define your ajaxCall function outside of fullcalendar:
var ajaxCall = function(eventData){
$.get( "ajax/test.html", function( data ) {
setEvent(eventData._uid,data); //data should be a boolean
});
};
var setEvent = function(id,exists){
var fcEvent = $('#calendar').fullCalendar("clientEvents",function(event){ //get the associated event object
if(event._uid === id){
return true;
}
})[0];
if(typeof fcEvent !== "object")$.error("Event id "+id+" doesn't exist!"); //Throw error if it doesn't exist
fcEvent.display = exists; // Store the server response in the event
$('#calendar-holder').fullCalendar("updateEvent",fcEvent); // Updates and re-renders the event
}
JSFiddle Demo (using fake ajax calls)
Some Explanation
Couple of things that might be useful to know:
The word render in fullcalendar refers to actually displaying the events. It's done whenever the view changes (more often than events are fetched from the DB)
Event sources only fetch events when they are needed. They are stored client-side as data that can be rendered as needed.
eventDataTransform is called once after an event source retrieves an event.
So if you put your ajax call in eventAfterAllRender, the ajax call would be done everytime FC decided to render the calendar resulting in more ajax calls that necessary. It also means you would get a delay every time you change the view. It's much better to do it earlier than render-time.
I'm using fullcalendar to allow people to select multiple days. If they make a mistake, they can click the event to remove it.
Here's where I am:
var eventArray = new Array();
var cal = $('#new-show-calendar');
cal.fullCalendar({
height: 250
,events: eventArray
,dayClick: function(date, allDay, jsEvent, view) {
var stringDate = date.toString();
e = { title: "Some Title", start: stringDate }
eventArray.push(e);
cal.fullCalendar( 'renderEvent', e );
}
,eventClick: function(event, jsEvent, view) {
eventArray.splice(eventArray.indexOf(event), 1);
cal.fullCalendar( 'removeEvents', event._id );
}
})
This line gives semi-unpredictable results
cal.fullCalendar( 'removeEvents', event._id );
I've tried rerenderEvents (which doesn't do anything) and a few other things. I'm trying to avoid cleaning out all the events then re-rendering each event individually for performance reasons.
I assume this is a bit of wonkiness around having a local, array-based datasource as opposed to a json source somewhere else.
EDIT: This code (above) works as long as the view doesn't change. If I remove some things, then switch months, new events no longer persist on the calendar across views.
How can I remove an event from the calendar?