Fullcalendar: Setters for all options

[arshaw]

Originally reported on Google Code with ID 293

Is there an easy way to set timeSlot property when fullcalendar is already
in use? I have different types of users in the drop-down list and each of
them have different settings (like timeSlot). After selecting one of users
I'd like to load calendar again with custom timeSlot property. I know Adam
introduced this featured in last released, but it only works for
apsectRatio, contentHeight and height. I need to setup timeSlot as well.
I'm on the deadline... Has anybody any clue how to resolve this issue?
Adam: is there any way to include this in the next release?

Thanks again for your great script. It's awsome!

Reported by marcin.milinski on 2010-01-15 14:32:25

Imported with 59 stars.

[arshaw]

hi marcin,
yeah, having option "setters" is something i've been meaning to get to. can't say
when though.

for now, what you could do is destroy the calendar
(http://arshaw.com/fullcalendar/docs/display/destroy/) then re-initialize it. sort
of
clunky, but might work for you.

accepting this issue on the grounds of having "setters" for all options.

Reported by adamrshaw on 2010-01-20 05:15:35

• Status changed: Accepted
• Labels added: Type-Enhancement
• Labels removed: Type-Defect

[arshaw]

is there a builtin function to reinit the calendar. I'm trying to build custom 
buttons into the calendar that would allow changing the timeSlot. I've been able to

destroy the calendar but I'm at a loss for how to recreate it from within the public

methods.

Reported by sneed424 on 2010-03-08 18:33:54

[arshaw]

here's a code sample:
slot15: function(){
    options['slotMinutes'] = 15;
    $(window).unbind('resize', windowResize);
    if (header) {
        header.remove();
    }
    content.remove();
    $.removeData(_element, 'fullCalendar');

    //reinit??
},
slot30: function(){
    options['slotMinutes'] = 30;
    $(window).unbind('resize', windowResize);
    if (header) {
        header.remove();
    }
    content.remove();
    $.removeData(_element, 'fullCalendar');

    //reinit??  
},
slot60: function(){
    options['slotMinutes'] = 60;
    $(window).unbind('resize', windowResize);
    if (header) {
        header.remove();
    }
    content.remove();
    $.removeData(_element, 'fullCalendar');

    //reinit??  
},

Reported by sneed424 on 2010-03-08 18:36:37

[arshaw]

hi sneed,
reiniting the calendar is a matter of calling the basic .fullCalendar function, with
all the 
options again. for example:

function init(slotMinutes) { // slotMinutes is an optional parameter
   $('#calendar').fullCalendar({
       slotMinutes: slotMinutes
       // other options
   });
}

function changeSlotMinutes(v) {
   $('#calendar').fullCalendar('destroy');
   init(v);
}

init();

Reported by adamrshaw on 2010-03-16 03:04:00

[arshaw]

Issue 640 has been merged into this issue.

Reported by adamrshaw on 2010-03-16 03:06:10

[arshaw]

Issue 771 has been merged into this issue.

Reported by adamrshaw on 2010-06-15 05:42:28

[arshaw]

Issue 803 has been merged into this issue.

Reported by adamrshaw on 2010-07-06 04:48:09

[arshaw]

Issue 995 has been merged into this issue.

Reported by adamrshaw on 2010-11-22 21:34:47

[arshaw]

Issue 1091 has been merged into this issue.

Reported by adamrshaw on 2011-02-14 02:24:41

[arshaw]

Issue 1101 has been merged into this issue.

Reported by adamrshaw on 2011-02-15 17:52:51

[arshaw]

Issue 1151 has been merged into this issue.

Reported by adamrshaw on 2011-04-02 20:04:34

[arshaw]

I'm up to add native support.

$('#calendar').fullCalendar('option', 'minTime', 9);..
..could destroy itself and reinit with its stored values?

Reported by jonathan.huot on 2011-05-30 16:05:57

[arshaw]

See code in https://github.com/arshaw/fullcalendar/pull/25 to see how it could be possible
to handle it.

Reported by jonathan.huot on 2011-07-13 15:09:48

[arshaw]

Code by Jonathan simply resets the calendar, so you lose all the state that you had
before doing it (i.e. which month you were, whether it was month/week/day view, etc.).

Looking forward to getting the real enhancement by Adam.

Reported by e.medina.m on 2011-07-20 15:33:15

[arshaw]

any timeframe on this yet? I'd really like to be able to change some options without
having the calendar refetch all of my events from the server...

Reported by [email protected] on 2011-07-29 16:25:06

[arshaw]

Issue 1353 has been merged into this issue.

Reported by althaus.it on 2011-08-24 09:35:28

[arshaw]

I would also like this. +1 :)

Reported by [email protected] on 2011-09-26 16:18:25

[arshaw]

I would really like this as well. I would like to turn on-off the "select-ability" of
the calendar dynamically.

-Brian

Reported by bhendel on 2011-11-06 05:42:51

[arshaw]

I made some changes on the plugin and now I can change minTime and maxTime dynamically.
I think that it works for the other options too.

I simply changed the "changeView" function to support a "force_reload" parameter that,
when set to true, recreates the current View with the existent options. Then, I made
a function called setOptions that simply has this code:

function setOptions(new_options) {
    $.extend(options, new_options);
    var viewName=currentView.name;
    changeView(viewName,true);
}

I hope this can help someone in need =)

Reported by cristianomnsantos on 2012-01-25 22:27:47

[arshaw]

I forgot to specify the changes made on "changeView"...
Here are the important lines:

    function changeView(newViewName,force_reload) {
        [+]if (force_reload || !currentView || newViewName != currentView.name) {
        ....
        content.css('overflow', 'hidden');

        currentView = viewInstances[newViewName];
    [+]if (force_reload)
        [+]currentView.element.remove();
    [+]if (currentView && !force_reload) {
        currentView.element.show();
    }else{
        currentView = viewInstances[newViewName] = new fcViews[newViewName](
     ....

The "[+]" signals indicate changes or additions.

Reported by cristianomnsantos on 2012-01-25 22:36:05

[arshaw]

Hi there,

I put it inside this function:

*function Calendar(element, options, eventSources){*

In my case, I put it on the end of "*Misc*" functions (it's a comment that
is inside the previous function).

Reported by cristianomnsantos on 2012-08-12 18:37:40

[arshaw]

Christian's patch worked for me. The only thing it requires t.setOptions = setOptions;
line in the // exports section at the top of Calendar.js

Reported by sergey.volobuev on 2012-11-01 00:50:56

[arshaw]

Has this been implemented yet?

Reported by tdragsbaek on 2013-06-28 12:23:47

[arshaw]

Reported by adamrshaw on 2013-08-14 01:54:53

• Labels added: Type-Feature
• Labels removed: Type-Enhancement

[arshaw]

Issue 371 has been merged into this issue.

Reported by adamrshaw on 2013-08-14 02:38:51

[arshaw]

NOTE TO SELF: the `editable` option should be dynamically settable as well, to make
the "lock" functionality mentioned in Issue 371 possible.

Reported by adamrshaw on 2013-08-14 02:39:52

[arshaw]

Issue 1659 has been merged into this issue.

Reported by adamrshaw on 2013-08-14 03:12:25

[arshaw]

Issue 1448 has been merged into this issue.

Reported by adamrshaw on 2013-08-15 03:27:44

[arshaw]

Issue 1834 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 02:05:40

[arshaw]

Issue 1856 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 02:23:55

[arshaw]

Issue 1631 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 02:53:16

[arshaw]

Issue 2008 has been merged into this issue.

Reported by adamrshaw on 2013-10-07 06:07:40

[arshaw]

Did this ever get an update? The issue has been open for 4 years now.

Reported by boeluhh on 2014-01-16 10:47:10

[arshaw]

Is it possible to add minTime: 8.15 and maxTime: 22:15?

Reported by immandotnet on 2014-03-10 09:53:26

[arshaw]

is there now a support to change the options without destroying the whole calendar?

Reported by justme.though on 2014-04-23 11:59:37

[arshaw]

A little up for this feature, it will be very usefull for making a zoom

Reported by cedric.clavier on 2014-04-29 09:43:01

[arshaw]

I solved the problem by adding a custom event to renderView function "beforeViewRender"
and update the options dynamically inside the callback. I just copied the "viewRender"
event in the beginning of the renderView function.

Reported by leon.panjtar on 2014-05-19 22:57:02

[arshaw]

Until this feature is implemented for all changes across the board, here is a pull request
implementing a setter specifically for `hiddenDays`:

https://github.com/arshaw/fullcalendar/pull/156

via @jkrehm

Reported by adamrshaw on 2014-06-05 20:09:15

[arshaw]

the original pull request via @Hedi-s:
https://github.com/arshaw/fullcalendar/pull/143

Reported by adamrshaw on 2014-06-05 22:07:12

[arshaw]

Guys i had the same need of building a zoom functionality by using the 'slotDuration'
attribute. Checked the source code (fullcalendar.js, v2.02) and found a solution. Just
do the following changes in the file:

1.
    // Exports
    // -----------------------------------------------------------------------------------

    t.options = options;
    [..]
    t.trigger = trigger;

=> Add one line at the end (after 't.trigger = trigger;') saying 't.refreshView = refreshView;'


2.
    // View Rendering
    // -----------------------------------------------------------------------------------

=> Add following code directly after this:

    function refreshView() 
    {
          _changeView(currentView.name);
    }

3.
        function option(name, value)

=> Change this function to following code:

    function option(name, value) {
        if (value === undefined) {
            return options[name];
        }
        if (name == 'height' || name == 'contentHeight' || name == 'aspectRatio') {
            options[name] = value;
            updateSize();
        }

        if (name == 'slotDuration')
        {
            options[name] = value;

            refreshView();
        }
    }   


You can now set the 'slotDuration' on the fly by executing a javascript like '$('#calendar').fullCalendar(
'option', 'slotDuration', '00:10:00')'

Reported by ti08m015 on 2014-08-27 08:24:05

[arshaw]

Issue 1181 has been merged into this issue.

Reported by adamrshaw on 2014-12-15 05:28:51

[arshaw]

any updates on this ability to dynamically change options?

Reported by warath on 2015-01-14 22:19:10

[arshaw]

I would like to give my users the chance to toggle some days in the week view so they
could optimize screen space and get a more responsive view. To do so, I would need
to tweak 'hiddenDays' attribute.

Would there be a way to achieve it without having to destroy and rerender the whole
thing ?

Reported by infamc on 2015-03-26 04:25:38

[arshaw]

Adam, Is there any update on this yet? or suggest a best way to set minTime/maxTime
dynamically

Reported by abu.abs543 on 2015-04-19 06:24:08

[arshaw]

unbelievable, the author kept merging other issues to this one, but this feature has
been requested for 5 years without any progress.

Reported by a.perky.cat on 2015-06-28 07:09:09

[twiginteractive]

+1 for this functionality (which is pretty much standard in jQuery plugins, so was surprised to see it still missing from FC)

I tried using the direct approach from http://stackoverflow.com/questions/13432014/how-can-i-set-fullcalendar-options-dynamically - (retrieving the current view and accessing the options object directly) but it didn't seem to work even with a call to ( 'render' ). So instead only way I have found is to destroy the calendar, and reinitialize with a modified args array.

Hopefully this will be a cleaner method.

[zoranlorkovic]

+1 for this feature. Changing time format based on user select (dynamically) would be great!

[mashintsev]

+1. We need change slotDuration in Timeline view dynamically.

[ivanbozic]

+1. Any updates on at least a possible timeline for this?

[arshaw]

hoping to get to this late this Q1 or early Q2

[killa-kyle]

I'm interested in this feature as well. Thanks @arshaw for your work on Fullcalendar. It does most of what I need for the plugin I'm writing. I appreciate it.

[ajaybairagi]

I have fixed this issue with another method

<div id="time_format" time="12" > 24 Hours </div>

$("body").delegate("#time_format","click",function() {
var resourceWiew=$('#calendar').fullCalendar('getView').name;
if(resourceWiew=="timelineDay" || resourceWiew=="timelineThreeDays"){

        if($(this).attr("time")=="12"){
            $(this).attr("time","24");
            $(this).html("12 Hours");
            $('.fc-widget-header .fc-cell-text').not(":eq(0)").each(function() {
                $(this).html(calTime24($(this).html()));
            });
        }else{
                $(this).attr("time","12");
                $(this).html("24 Hours");
                $('.fc-widget-header .fc-cell-text').not(":eq(0)").each(function() {
                    $(this).html(calTime12($(this).html()));
                });
        } 

}

[arshaw]

This has been implemented and release in v2.9.0. You can set nearly any option dynamically like this:

$('#calendar').fullCalendar('option', 'lang', 'fr');

The languages and timezones demos are examples of this.

You can also set multiple options at the same time:

$('#calendar').fullCalendar('option', {
    lang: 'fr',
    isRTL: true
});

Not all options can be dynamically set. See the full docs for more info.

For most options, dynamically changing the value will rerender the entire current view (while keeping the previous scroll state). If special-case optimizations are needed for specific options, please make separate tickets.

For the Scheduler premium plugin, there is a known bug where the row expanded/contracted state is not maintained: https://github.com/fullcalendar/fullcalendar-scheduler/issues/196

Thanks for patiently waiting for this feature.

[lorinkoz]

Let me bug this thread one last time: AWESOME! Thanks

[wunsjoshi]

Hi @arshaw ,

We are using v1.5.4 and we are facing issue with change of property values on the fly. I tried to update key: value for options[name] but still we are facing issue with refreshing calendar.

https://github.com/fullcalendar/fullcalendar/issues/564#issuecomment-132534043

https://github.com/fullcalendar/fullcalendar/issues/564#issuecomment-132534093

None of above solutions worked for us.

Would you please shed some lights on this?

Thanks,
Sumit Joshi

[arshaw]

@wunsjoshi, dynamic property value changing is supported in >=2.9.0. So, doesn't work in v1.5.4.

Please open up on a new ticket for any discussion beyond this.