I am using fullcalendar and I am not using event source, I render all the events by using renderEvent method like following:
$('#calendar').fullCalendar('renderEvent', {
id: obj.Id,
title: obj.Title,
start: obj.Start,
end: obj.End,
text: obj.Text,
className: "custom" + colorIndex,
allDay: obj.AllDay,
userId: obj.userId
});
But the problem is, like I rendered 5 events in Mar.2011, they are all displayed OK. And then I navigate to Feb.2011 and back, all the 5 events are disappeared.
Does it mean that if I render the events like this, I have to render the events everytime the view is changed?
Best Regards.
Larry.
you gotta use the stick parameter of the renderEvent function
http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
I tried last night.
If I use event source then the problem is solved.
It seems that if I render the event one by one. They are not kept through view changing.
Related
What is the way to catch anytime a view is rendered?
Not only when switching views, but also when clicking today / prev / next?
I need to clear an array of unique event titles after (or before) each render is complete.
So, similar to eventAllRender which was removed starting v4.
Currently using .click event for all buttons, which does the trick, but I was hoping there was something really linked to the actual rendering.
calendar.render();
$('.fc-button').click( () => {
console.log("do something")
})
https://fullcalendar.io/docs/datesSet
Called after the calendar’s date range has been initially set or
changed in some way and the DOM has been updated.
datesSet: function(info) {
// ...
}
I am using Aframe 0.7.0. and it working great! My application has camera with cursor and the raycaster intersect with entities.
I want to disable click event that is emitted by intersection of cursor and any entity, but at same time I want other events to work just fine, like mouseenter, etc.
How can I achieve this? Please let me know if I am missing any information required for this question.
Thanks
If i'm correct about Your idea, You should be able to do something like this.
Activate clicking on stuff using the addEventListener("click", handler)
Deactivate clicking on stuff using the removeEventListener("click", handler)
Having those in Your component,
AFRAME.registerComponent("foo", {
addListeners: function() {
this.el.addEventListener("click", this.handler);
},
removeListeners: function() {
this.el.removeEventListener("click", this.handler);
},
handler: function() {
// whatever response from clicking
}
});
You can enable clicking by using el.components.foo.addListeners and disable using el.components.foo.removeListeners from any other method.
Check out my example here. right box enables, disables the click event on the left one. Check it out in the console.
I'm building a calendar-based web app with fullcalendar, which is for college students to use. There are some categories I've defined. e.g, sport, art, mind, etc... every event in the fullcalendar would be assigned to a category.
What i want to do is: there're some checkboxes corresponding categories on the top of the calendar, and the user can check or uncheck some checkboxed to hide/show the related events
how would I achieve this?
One way is to put appropriate classes on each event by setting the 'className' property on the event objects you're sending to the calendar and use jquery to hide those events (e.g. $(.myClassName).hide()) when they check the checkboxes. The trouble is the events would vanish leaving a gap where they were which might not be what you want.
A better way would be to add a filter function to the events option when you first call fullCalendar like this:
fullCalendar({
...
events: {
url: ....,
success: function(events) {
$.map(events, function (e) {
if (userHasFilteredOut(e))
return null;
else
return e;
});
},
...
});
This will filter out the events before they are displayed. The function userHasFilteredOut returns true if the event object passed in is of a class the user's checkbox values indicate is filtered out. When the user checks or unchecks a checkbox, you will need to refetch all the events from the server. You need to do this:
$('#mycal').fullCalendar('refetchEvents');
I’m trying to dynamically create a list of buttons in a ToolBar. The events are not going off, and when I try to change there properties I get a “uncaught typedef: Cannot call methed setcaption on undefined” I have the following code that create the buttons,
LoadTabs: function()
{
this.$.tabs.createComponents([
{name: "mycusbut", caption: "b",onclick: "btnClick" }, // this event never goes off!!!!
{caption: "b"},
{caption: "c"}
]);
// this.$.frediop.setCaption("Put some text here"); // handle the button click
},
The event btnClick never goes off, and the code that tries to change the property.
btnClick: function()
{
this.$.mycusbut.setCaption("Put some text here"); // get a undefined object error
}
The way we're creating the buttons here will cause them to appear on the tabs object. If you want to reference those you'll need to use the following syntax:
this.$.tabs.$.mycusbut
The second issue about the code not being called is a bit more insidious... Because you are creating the buttons on the tab object it's looking for the function on the tab object, which is probably not what you want. You'll either want to separate out the tab object into its own kind and have an event you can fire when the button is clicked or you'll want to take a different approach to creating the objects. Perhaps making a toolbar kind that you can dynamically create buttons on would be a good approach?
Edit: An even simpler approach is to tell the createComponent to set the owner to the main kind. Alter it as follows:
this.$.tabs.createComponents([
{name: "mycusbut", caption: "b",onclick: "btnClick" },
{caption: "b"},
{caption: "c"}
], {owner: this});
Now your code should work as you expect.
An issue i faced while using the select was:
When I click on the date in the month view, the function as specified in the select: function(start, end, allDay) {etc code i want to run here } is immediately fired before changing the view.
I am trying to achieve the following:
1) User clicks on a date on the month view
2) user gets sent to the agendaDay view on the date that he clicked via dayclick() and changeView and gotoDate.
3) User uses select to select time slots.
4) fire up the code i want to run.
Any advice is much sppreciated.
Regards,
Han
version 1.4.7 added support for a "View Option Hash" for the selectable option, so something like this:
$('#calendar').fullCalendar({
selectable: {
month: false,
agenda: true
}
});