Monthly Calendar Monthname title with Navigator

Asked by Martin
8 years ago.

Dear daypilot Team,

Created this code for the navigation:
<a href="javascript:dp.startDate = dp.startDate.addMonths(-1); dp.update();navigator.onTimeRangeSelected();" class="btn btn-default btn-xs"></a>

Put this code in the calender script:
navigator.onTimeRangeSelected = function(args) {
dp.update();
$("#label").html(args.day.toString("MMMM yyyy"));
};

But the browser console shows this error:
TypeError: args is undefined

Has anyone implemented something like this?
Or do I have the possibility to highlight the monthname in the calendar?

Bye,
Martin

how-to javascript

screenshot01.jpg

Answer posted by Dan Letecky [DayPilot]
8 years ago.

The problem is that you are manually calling onTimeRangeSelected without any parameter.

Take a look at the source of this page:
http://javascript.daypilot.org/demo/month/navigator.html

This is the best way to synchronize next/previous buttons with the navigator, the month control and the label.

The buttons update the navigator using .select() and the navigator updates the month control and the label automatically.

<div style="margin-left: 150px;">
    <div class="space">
        <a href="javascript:nav.select(nav.selectionStart.addMonths(-1));">&lt;</a>
        <span id="label" style="display: inline-block; width: 100px; text-align:center;"></span>
        <a href="javascript:nav.select(nav.selectionStart.addMonths(1));">&gt;</a>
    </div>

    <div id="dp"></div>
</div>


<script type="text/javascript">

    var nav = new DayPilot.Navigator("nav");
    nav.showMonths = 3;
    nav.selectMode = "month";
    nav.onTimeRangeSelected = function(args) {
        dp.startDate = args.start;
        dp.update();
        $("#label").html(args.day.toString("MMMM yyyy"));
    };
    nav.init();    
    
    var dp = new DayPilot.Month("dp");
    // ...

Comment posted by Martin
8 years ago.

Many thanks Dan.
Your hint solved my problem.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Monthly Calendar Monthname title with Navigator

Products

Learn

Get Support

DayPilot Pro