I use fullcalendar and set header right: 'month,agendaWeek,agendaDay'
I did not set the default view. When I refresh the page everytime the month view display.
How can I select the agendaDay view and refresh the page then the agendaDay view remains?
Thanks.
Get this plugin:
https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js
Add to the top of your page:
<script type="text/javascript" src="jquery.cookie.js"></script>
Then do this when you intialize fullcalendar (change 'month' to whatever you prefer as default)
var calendarView = (!$.cookie('calendarDefaultView')) ? 'month' : $.cookie('calendarDefaultView');
$calendar.fullCalendar({
defaultView: calendarView,
viewDisplay: function(view){
$.cookie('calendarDefaultView', view.name, {expires:7, path: '/'});
},
One technique is to use the getView (http://arshaw.com/fullcalendar/docs/views/getView/) on page unload and save it in the app session (via ajax maybe). And then use this session value to initialize the calendar when the page reloads. This is assuming you have an webapp.
If you need a pure client-side solution, try appending the selected view value to the query string of the next page, instead of session
Unless I'm not understanding you correctly surely you want to set the defaultView option?
http://arshaw.com/fullcalendar/docs/views/defaultView/
Related
I'm using FullCalendar and I'm trying to display the calendar view automatically without click on the today button each time. For do this I've inserted in the initialization this stuff:
$(document).ready(function()
{
$('#calendar').fullCalendar({
aspectRatio: 2.40,
viewDisplay: 'month'
})
});
But the calendar isn't displayed, I must click on today button, I want that the calendar is displayed automatically, without click on today button each time. How can I do this?
The "viewDisplay" parameter should be used in this way:
http://fullcalendar.io/docs1/removed/viewDisplay/
Keep in mind the following comment:
"This option has been deprecated in favor of the viewRender callback."
I added bootstrap popovers to the calendar events which open on click:
eventClick: (event, jsEvent, view) ->
if event.ajaxUrl?
elem = jQuery(#)
elem.popover('destroy')
jQuery.ajax({url: event.ajaxUrl})
.done (result) ->
elem.popover(
placement: 'top'
html: true
trigger: 'manual'
title: moment(event.start).format('dddd, DD. MMMM YYYY - HH:mm')
content: result
container: 'body')
elem.popover('show')
My problem is, that these popovers stay open when I change the calendar view (e.g. change the month or to week/day layout). As the popovers are bound to the .fc-event divs/spans within the calendar, I need to access these DOM elements to run .popover('destroy').
Whenever a fullCalendar view is changed, the old DOM-Elements are replaced with the ones for the new view, so I would have to access them before the view is actually changed. Unfortunately there are only callbacks for event loading (loading which happens after the view is changed) and viewDisplay (same, but you get the new view).
To make sure I understood viewDisplay correctly, I added a small test to the calendar which always gives me "0" (the data-selector comes from jquery data selector)
viewDisplay: (view) ->
alert(jQuery('.fc-event:data(popover)').size())
Is there a way to hook into the calendar process everytime the view is to be changed - but before the view is actually changed?
Edit
For now I'm simply destroying the popovers once the mouse is moved over any calendar button (as a bind to click would be executed after the view change), but this solution is just a workaround
jQuery('.fc-button').on 'mouseover', () ->
jQuery('.fc-event:data(popover)').popover('destroy')
V3
I think you are looking for http://fullcalendar.io/docs/display/viewRender/
From doc
viewRender
Triggered when a new date-range is rendered, or when the view type
switches. function( view, element ) view is the View Object for the
new view. element is a jQuery element for the container of the new
view.
This callback will get triggered when the user changes the view, or
when any of the date navigation methods are called.
This callback will trigger after the view has been fully rendered,
but, before events have been rendered (see also: eventAfterAllRender).
UPDATE
V4 renamed from viewRender to datesRender https://fullcalendar.io/docs/v4/datesRender
V5 renamed from datesRender to datesSet https://fullcalendar.io/docs/datesSet
In V4, viewRender was deprecated, check out the release notes, now they have:
"viewSkeletonRender" callback which is triggered when the new view is mounted, it receives a view object containing a lot of good stuff in it.
"viewSkeletonDestroy" callback which is triggered right before the old view is about to get unmounted.
--
Alternatively, thought may not answer the question directly, you can use the "datesRender" callback. I needed was to run a function when previous, next, or the view changed. (I had to compute the total number of hours of an event type based on the date range and the views)
I have been trying to fetch event data from a Google calendar using FullCalendar for hours now. I'd like the data to be in an object so I can use it outside of the full calendar appearing on my page, and I can't seem to get it right.
Here is the code I have:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: 'https://www.google.com/calendar/feeds/wrchapin%40gmail.com/public/basic',
});
var events = $('#calendar').fullCalendar( 'clientEvents' );
console.log(events.length);
});
The calendar appears as it should on the page, but the console shows a length of 0. What is going on? Am I using the clientEvents method improperly?
Thanks for any help you can offer.
The problem here is that the call to fetch the clientEvents happens before the calendar has loaded the events. That's the reason the events array is blank.
You can easily solve this by using the loading callback of the calendar. Take a look at this fiddle:
http://jsfiddle.net/100thGear/gt8F9/
Let me know if this helps!
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");
I have got a jqgrid, and i would like to put a link in it to open up more details on the row in a modal window.
Everything i have read about modal windows uses a div that gets shown when you click the link, but i want to pass an id so i can just get the info i need. I know i could do it with a new window quite easly but i would like to use a modal window if poss.
Any ideas how i could do this. I'm using asp.net if thats going to be relevent.
Cheers
Luke
I'd suggest using the jQuery UI Dialog plugin for custom modal windows. You can find demonstration and documentation here:
http://jqueryui.com/demos/dialog/
In theory, to do what you're asking for, you could follow these steps:
Add a “dialog” div tag to your page.
Build the link into your data feed. If you’re using a XML data type make sure you use a CDATA flag to encapsulate your link so that they XML may be parsed correctly.
< cell>< ![CDATA[< a href=”javascript:showDialog(‘551’)”>text]]>< /cell>
In this instance, since we know the actual id at the time the link is create, I pre-populated the id (e.g. 551) in the function. This could also be retrieved from jqGrid API with the selrow property. It’s your call. If you use a JSON data type, the idea would similar. You wouldn’t have to worry about the CDATA qualifier.
Create a local function (e.g. showDialog (id)) to correspond to your link.
Add code in the showDialog function to populate and open the modal dialog. Using an AJAX call to gather specific data for this record, create the dialog content and populate the dialog using the jQuery .html method.
function showDialog (id) {
$.ajax({
url: "feed.aspx?id=" + id,
success: function(data) {
var content = // TODO: create dialog layout here
$("#dialog").html(content);
$("#dialog").dialog({
title: 'Record Details',
modal: true,
closeOnEscape: true,
width: 300,
height: 200,
buttons: false,
position: "center",
});
$("#dialog").dialog("open");
}
});
}
This is just one way to skin the cat. You should be able to use more of a jQuery approach with the link creation. If desired, rather than building the specific link the data feed, you could add jQuery click event bindings to handle the request. It’s your call. You could also add the dialog div dynamically to your page using jQuery rather than just placing it manually like I described above. It might be a little more elegant looking but would achieve the same goal.
I am attempting this late. May be you have an answer. Thought this will help others.
The #dialog code can be done as suggested by gurun8. This needs to be wired to the jqgrid. There is a onSelectRow event which triggers whenever a row is selected in jqgrid. Refer documentation. I usually add autoOpen: false, to the dialog constructor.
You need to add the onselectrow event to the grid (jqgrid function as shown below) and you can pass the id to the function. This id is the unique identifier in the jqgrid. Make sure there are no syntax errors, add comma wherever appropriate.
$s("#list").jqGrid({
...
onSelectRow: function(id){
console.log("row is selected"+id);
$url = "your_url/";
$s('#dialog').load($url);
$s('#dialog').dialog('open');
}
...
});