[CLOSED] CalendarPanel - Using a custom navigation toolbar

[chulcy]

I cannot find a simple example of how to use a custom toolbar to navigate the months of a CalendarPanel.
Can you direct me to an example of this? Please.

I'm thinking something like this (pseudo code):

<ext:Panel ID="pnlPanel" runat="server">
   <TopBar>
      <ext:Toolbar ID="pTopbar" runat="server">
         <ext:Button Text="Previous Month">
            <Listeners>
               <Click Handler="pnlCalendar.setMonth(pnlCalendar.CurrentMonth - 1)"
            </Listeners>
         </ext:Button>
         <ext:Button Text="Next Month">
            <Listeners>
               <Click Handler="pnlCalendar.setMonth(pnlCalendar.CurrentMonth + 1)"
            </Listeners>
         </ext:Button>
      </ext:Toolbar>                                            
   </TopBar>
   <Items>
      <ext:CalendarPanel runat="server" ID="pnlCalendar">
      </ext:CalendarPanel>
   </Items>
</ext:Panel>

Does such a thing exist?
Thank you!

[Daniil]

Hi @chulcy,

Unfortunately, we don't have such an example.

Though, if you look at this example, there is something helpful to you.
https://examples3.ext.net/Examples/C...Overview/Basic

Please notice a DatePicker on the left. If you pick different dates, the current date of CalendarPanel is updated.

[chulcy]

Thanks for the reply Danill,

I have looked at that example, and it has the behavior I need, I'm just not able to see the magic line of code that actually sets the current date being rendered in the CalendarPanel.

Can you at least tell me the line of javascript code where you could set the current date being rendered?

Something like:

pnlCalendar.currentDate = '1/1/2015';

Maybe you would need a refresh?

pnlCalendar.update();

If I can't control the current date being rendered (without using the "built-in" right and left buttons in the optional nav bar), how would I handle creating my own top nav bar?

Or, is there a way to add additional Event Filtering onto the existing Nav Bar and I'll just use the "built-in" Next Month and Previous Month buttons?

Thanks again for your help,
Craig

[Dimitris]

In the official example, the declaration of the date picker is:

<ext:DatePicker
    ID="DatePicker1"
    runat="server"
    Cls="ext-cal-nav-picker">
    <Listeners>
        <Select Fn="CompanyX.setStartDate" Scope="CompanyX" />
    </Listeners>
</ext:DatePicker>

Note, the Select listener which calls the setStartDate function. Now, if you download the example's source code and open the common.js file (inside the \resources\js\ folder) you should see the actual call to calendar's setStartDate method, which is the line of code you are looking for:

(file: \resources\js\common.js)

setStartDate : function (picker, date) {
        this.getCalendar().setStartDate(date);
    }

[chulcy]

Thank you for the support, I got my solution working.

I ended up using this javascript function to handle replicating the Previous and Next month buttons.

var onMonthChange = function (i) {
  var d = new Date(Ext.getCmp('CalendarPanel1').layout.activeItem.startDate);
  d = d.setMonth(d.getMonth() + parseInt(i));
  Ext.getCmp('CalendarPanel1').setStartDate(new Date(d));
}

Then just set the Click Handler for each button like this:

cPrevButton.Listeners.Click.Handler = "onMonthChange(-1);";
cNextButton.Listeners.Click.Handler = "onMonthChange(1);";

If you need to set the text of a control to the current month being rendered, this worked for me:

Ext.getCmp('cCurrentMonthControl').setText(Ext.util.Format.date(Ext.getCmp('CalendarPanel1').layout.activeItem.startDate, 'F Y'));

Thanks again for the prompt support.