Our powerful JS Calendar component


Post by Jannvhi »

Hi, I came across the resize event:
https://www.bryntum.com/docs/calendar/#Core/widget/Widget#event-resize

The reason, I'm using this is because of the old,new size values provided by the listener.

I use calendar in my app and I would like to use the resize event when my browser window is resized.So how shall it be used?

I tried assigning

:listeners = "listener"

to calendar and

listener:{
  resize:myResizeFn
}

I did this like how we give in Schedulers, but it didn't work.

could you kindly tell how to use this event ?


Post by mats »


Post by Jannvhi »

Thanks for the reply mats.

I used like this..

    <calendar
      ref="calendar"
      :eventColor="calendarConfig.eventColor"
      ...
      :modes="modes"
      :monitorResize="monitorResize"
      :listeners="listeners"
    ></calendar>
      data(){
      return{
            monitorResize:true,
	    listeners:{
        	resize:resizeFn /*resize:resizeFn is a global function outside the vue instance */
      	    },      
} }

Without the resize field, there is no crash(though resize event is not trigerred).When I give resize, it crashes the app:

"TypeError: Cannot read property 'eventStore' of undefined" inside my watcher wherein I'm setting the

eventStore.data = newEvents.

I can understand that I'm doing something wrong, not sure what it is..


Post by saki »

Adjust our basic example like follows:

        <bryntum-scheduler
            ref="scheduler"
            v-bind="schedulerConfig"
            :stripeFeature="stripe"
            :columnLinesFeature="columnLines"
            @resize="onResize" 
        />
    methods: {
        onResize(event) {
            console.log(event);
        }
    },

Post by Jannvhi »

Thanks for sharing the snippet saki. It works !!


Post Reply