Our powerful JS Calendar component


Post by jeff.wang »

Hi

there are two place, I don't know How to local the date display like below:

1 the header of calendar:

Image

2 the header of tooltips when click more:

Image

in addition, i want to change the position of three part like below, how can i do it:

Image

Thank you!


Post by alex.l »

  1. If it's our built-in component, I am not really sure because it looks different, you can specify https://bryntum.com/docs/calendar/api/Calendar/widget/mixin/CalendarMixin#config-descriptionRenderer to customize the text.
  2. Please check docs here https://bryntum.com/docs/calendar/api/Calendar/view/Calendar#config-tbar
    You'll find a list of widget names, all you need is to specify https://bryntum.com/docs/calendar/api/Core/widget/Widget#config-weight for them in order you want to see them
    Example:
    tbar : {
        items : {
            prevButton    : {
                weight : 100
            },
            viewDescription : {
                weight : 200
            },
            nextButton : {
                 weight : 300
            }
        }
    }
    

All the best,
Alex


Post by jeff.wang »

Yes, All are effect!

Thank you very much!

Jeff


Post by Animal »

The overflow popup (It's not a tooltip) has a dateFormat config. This question has been asked before: viewtopic.php?f=54&t=19436

Here's the config option: https://www.bryntum.com/docs/calendar/api/Calendar/widget/mixin/DayCellRenderer#config-overflowPopup


Post by jeff.wang »

It is Ok.

Thank you!


Post by jeff.wang »

Hi,

How to take over the click event of the prevButton and nextButton in agenda mode, I want to change the dateRange by month (no by day) when click the button.

Thank you!


Post by tasnim »

Here is an example of how you can achieve it:

    tbar : {
        items : {
            prevButton : {
                listeners : {
                    click() {
                        if (this.up('calendar').activeView.$$name === 'AgendaView') {
                            // your code here
                        }
                    }
                }
            }
        }
    },

Post by jeff.wang »

it is effect, but when i have the new dateRange and set the value to agenda view, there is a error throw like below:

Image

the code like below:

Reflect.set(calendarConfig.modes.agenda, 'startDate', startDate);
Reflect.set(calendarConfig.modes.agenda, 'endDate', endDate);

the config of agenda like below:

 
 {
   modes:{
       agenda: {
          range: 'day',
        }
   }
 }

it seems that i can't set the startDate or endDate in day range of agenda mode.

if i set the config like below, there is the same error like above image:

 {
   modes:{
       agenda: {
          range: 'day',
          startDate: '2021-12-01',
          endDate: '2022-01-01',
        }
   }
 }

there are some docs like below, i can't confirm whether it is reason:

If configured to use a range of days, no snapping is done. There's no defined start point so the startDate is set to the incoming Calendar date.

How to set the new startDate and endDate when i take over the click event of the prevButton and nextButton.

Thank you!


Post by Animal »

Im not sure of the exact requirements.

You want the AgendaView to show only one day.

But when you click the next button you want it to move forward by a month.

For example it's showing 1st of August 2022, then you click the next button and it shows 1st of September 2022?


Post by Animal »

This should work:

    modes : {
        agenda : {
            // Override previous method to jump by a month
            previous() {
                this.date = DateHelper.add(this.date, -1, 'month');
            }
            // Override next method to jump by a month
            next() {
                this.date = DateHelper.add(this.date, 1, 'month');
            }
        }
    },

Post Reply