Remove border

[Amos]

Hi

Is it possible to remove the border of a schedule when in agenda mode?

I tried :border and :chartArea and even went through the elements (inspect) and put border and border-width 0/none but nothing was changed.

It looks like a class you use overrides it... thanks

[Vengatesh Maniraj]

Hi Amos, 

Greetings from Syncfusion support. 

We have validated your reported query “Is it possible to remove the border of a schedule when in agenda mode?” at our end. We have achieved your requirement with the help of the navigating event of the EJ2 Vue Schedule like the below code. We have prepared a sample for your reference and it can be available below. 

[App.vue] 

    onNavigation(args) { 

      let scheduleElement = document.querySelector('.e-schedule'); 

      if(args.currentView === 'Agenda') { 

        scheduleElement.style.border = 'unset'; 

      } else if(args.previousView === 'Agenda') { 

        scheduleElement.style.border = '1px solid #dee2e6'; 

      } 

    } 

Sample: https://codesandbox.io/s/vue-schedule-removing-schedule-element-border-on-agenda-view-vmc45?file=/src/App.vue  

Kindly try the above sample and get back to us if you would require further assistance. 

Regards, 

Vengatesh  

[Amos]

Hi

I start with agenda and the only view I have is agenda so this event is never triggered,

I changed it to dataBound:

        databound() {

            let scheduleElement = document.querySelector(".e-schedule");

            scheduleElement.style.border = "unset";

        },

If this can be a property, like in charts (chartArea), this can be great

Thanks

[Vengatesh Maniraj]

Hi Amos, 

Thanks for the update. 

We are happy that you have achieved the solution for the Agenda view alone. And we let you know that if we can have only one view as Agenda then we can remove the border by overriding the below CSS class instead of binding the Scheduler events. 

<style > 

.e-schedule { 

  border: none; 

} 

</style> 

Sample: https://codesandbox.io/s/vue-schedule-removing-schedule-element-border-on-agenda-view-c0hyz?file=/src/App.vue 

Since we are having the customizing option to remove the border, separate property is not necessary to remove the border. 

Kindly check the above sample and get back to us for further assistance. 

Regards, 

Vengatesh  

[Amos]

Thanks, this is working great!

[Vengatesh Maniraj]

Hi Amos, 

You are most welcome. 

We are happy that our solution has fulfilled your requirement. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh