I am using fullcalendar from arshaw.com/fullcalendar for displaying events on a corporate intranet calendar. I had the className attribute working, made a couple changes to some code and now cannot figure out why it's not working. Here is the json that is returned from my service
[
{
"allDay":true,
"className":"corporate",
"editable":null,
"end":null,
"id":null,
"start":"2010-07-05T00:00:00.0000000",
"title":"4th of July Holiday (Day Off)",
"url":"\/en\/EmployeeResources\/Calendar\/Corporate\/2010\/07\/4th_of_july_holiday.aspx"
}
]
everything works fine, except for assigning the 'corporate' className to the event items on the calendar.
This is the code that I'm using on document.ready to load the calendar events, which again, works fine, it's just the className's that I'm having trouble with
$("#calendar").fullCalendar('addEventSource', '/layouts/calendar/SitecoreCalendarEventsHandler.ashx?calendar=Corporate')
I'll also note, I'm using the latest version from arshaw.com (1.4.6)
nevermind, it seems that it was being generated, web developer toolbar was not showing the class being added, but when I viewed generated source, that showed the class name. I had some messed up CSS, which was why the style appeared to not be showing up
Related
I need to detect the moment when a slot content rendered into my web component. I use slotchange event to track it. It works fine for all the browsers except iOS 11 (for iOS 13+ works ok). Could someone suggest how to do it properly?
So from the next code, I expect to see "firstUpdated" and "slotchange" messages in the console after the page is rendered. But for iOS 11 I have only "firstUpdated".
firstUpdated() {
console.log("firstUpdated");
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
console.log("slotchange");
});
}
Here is a sandbox:
https://codesandbox.io/s/minimal-litelement-vanilla-wy61t?file=/src/index.js
and URL to see the result:
https://wy61t.csb.app/
Older versions of Safari handled slot change events wrong - firing them before the elements were added to the DOM. I think firstUpdated is firing after the slot change has. Try using #slotchange=${... syntax instead, though even if that works it will fire out of order.
If that fails you may have check for the assignedElements manually to work around the Safari bug.
I'm building a calendar plugin for Vaadin (see https://vaadin.com/). Everythng works fine, the stylesheets are applied EXCEPT when I programatically change the view. The view changes but the Fullcalendar styles do not apply correctly! See sample screenshot.List View after changeView called
I need to hit refresh for the styles to apply correctly.
(If I just change the view using the full calendar 'built in' buttons at the top right, the styles are applied.)
Using FullCalendar V3.7.0 and and Scheduler trial 1.9.0
Vaadin is a GWT framework, using V6.8.
GWT code for calling changeView:
private native void changeView(JavaScriptObject cal,String view,String nid)
/*-{
cal.fullCalendar("changeView",view);
//cal.trigger( "create" ); trying to fix the not-applying .css problem
}-*/;
'cal' is the original selector returned by jQuery.
Any ideas how to fix this?
Found the problem. It was due to the Vaadin framework removing FC's style class from the topmost element. To fix, I simply added these back using the framework's setStyleName("fc fc-unthemed fc-ltr");.
I'm using an older version of fullCalendar (1.6.4) with mostly success. I've got a UI that has the ability to add new events to the calendar, and then edit them inline. I'm running into problems when I try to then update the calendar with the modified event object. I'm only running into this problem however with dynamically added events, I can apparently reload the page and update events that fullCalendar adds initially just fine.
The problem seems very related to how the event.source property works. When the property is null on the event, fullCalendar pushes a new instance of the event onto the "cache" object, even if the event otherwise exists on the calendar already. I'm not sure why or how this works. For whatever reason though, I then end up with duplicate instances of the event on the calendar day.
// code directly from fullCalendar 1.6.4
function renderEvent(event, stick) {
console.log('renderEvent',event)
normalizeEvent(event);
if (!event.source) {
if (stick) {
stickySource.events.push(event);
event.source = stickySource;
}
cache.push(event);
}
reportEvents(cache);
}
So, in cases that are a pure edit of an existing calendar item, I make sure the source value is set and not lost/nulled anywhere. Even if worst case it does the below and sets it to an empty object. (Note, this may be a cause of my problems, I just don't know enough about full calendar). Sometimes I even have to force it to be {}, otherwise it has multiple items in source and I again end up with duplicate calendar entries after updating.
calEvent.source = calEvent.source ? calEvent.source : {};
I then update my existing calendar with a call to renderEvent.
$('#calendar').fullCalendar( 'renderEvent', calEvent, true);
Unfortunately, I'm running into the case where the new calEvent sent to renderEvent is updated, and it does not update the instance on the calendar. This may be because of the source field? And it only happens for newly dynamically added events.
Can someone assist about how to properly edit events? And how this source field should properly be used.
Yet another question about the angular calendar directive. I need to display multiple calendars on one page and am using the jquery tabs widget. However, only one calendar will render properly. In normal jquery fullCalendar, you use the 'render' method to ensure that the calendar shows when the tab is selected. However, this doesn't seem to be working with the angular-ui calendar directive.
Here is a plunker showing what I mean. Delete the $().tabs() and the three angular calendars display just fine. Wrap them in tabs, and it no longer works:
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Any ideas on why this is not working and how to fix it?
Thanks!
PS. I will cross-post this question in Google Groups. Thanks.
It appears that despite the fullCalendar documentation, "show" is not the place to trigger a fullcalendar('render'). I should say, at least not when working with Angular. I don't know if that is correct under normal jQuery usage. Use the "Activate" event instead:
$("#tabs").tabs({
activate: function(){
("#calendar").fullCalendar('render');
}
});
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Use timeout while rendering.
<tab heading="{{tabs[0].title}}" active="tabs[0].active" select="renderCalendar()" disabled="tabs[0].disabled">
$scope.renderCalendar = function() {
$timeout(function(){
$('.calendar').fullCalendar('render');
}, 0);
};
I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.
Scenario:
I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.
You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:
$('#calendar').fullCalendar('rerenderEvents');
Hopefully this helps!
Use refetchResources: .fullCalendar( 'refetchResources' )
This will fetch and freshly re-render the resource data, per the FullCalendar documentation.
The problem:
"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here
In my opinion, destroy is not needed in this case, only with render you can see the calendar.
My solution:
<script type="text/javascript">
$('#objectname').show(0,onObjectShow);
function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>
You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.
Solution Based on this reference.
You can also redraw calendar on the fly using below command-
$(window).trigger("resize");