1. Home
  2. Forum
  3. Vue
  4. Agenda's questions

Agenda's questions

Hi

I started working with the agenda view and I have some questions about it.

1. Background: How can I set a transparent/colored background? I tried background="transparent" and bacground="#color" (like in charts) but both didn't work. The background is white.

2. Reverse: I hope this is possible. I want the agenda to go backward instead of forward. I'll set a date and it will show events starting that date backwards for X days (depending on agendaDaysCount). Any chance this is possible? If not, can I ask this to be added and is there a workaround in the meantime?

3. Date section: How can I add the month/year to the date/day part of each entry? I'm already using a template
<div style="white-space: initial;" ><div class="subject">{{data.Subject}}</div></div>
I guess I can add the date there but it will be part of the entry section, I want it to be part of the date section

Thanks

13 Replies 1 reply marked as answer
BS Balasubramanian Sattanathan Syncfusion Team July 13, 2020 01:00 PM UTC

Hi Amos, 
 
Greetings from Syncfusion Support. 

Query:1 
We have validated your requirement and let you know that this is can be done by making use of the below code snippet in the eventRendered event of the Scheduler. 

let data = [ 
  { 
    Id: 1, 
    Subject: "Decoding", 
    StartTime: new Date(2018, 1, 12, 11), 
    EndTime: new Date(2018, 1, 12, 13), 
    IsAllDay: false, 
    RecurrenceRule: "FREQ=DAILY;INTERVAL=1;COUNT=5;", 
    CategoryColor: "#e89898" 
  } 
]; 
 
onEventRendered: function(args) { 
  let categoryColor = args.data.CategoryColor; 
  if (!args.element || !categoryColor) { 
      return; 
  } 
  if (this.currentView === 'Agenda') { 
      args.element.firstChild.style.borderLeftColor = categoryColor; 
  } else { 
      args.element.style.backgroundColor = categoryColor; 
  } 
} 
  
Query:2 
We analyzed your requirement at our side and suspect that, your need is to navigate backward dates in the Agenda view. And it can be achieved by making use of the DatePicker of the change event 

onDateChange: function (args) { 
    this.selectedDate = args.value; 
}, 
 
Query:3 
We have validated your requirement and let you know that, we can add start and end date of the appointment data using the event template like the below code snippet. 

var eventTemplateVue = Vue.component('eventTemplate', { 
  template:`<div class='template-wrap'> 
        <div class='subject'>{{data.Subject}}</div> 
        <div class='time'>Time: {{getTimeString(data.StartTime)}} - {{getTimeString(data.EndTime)}}</div></div>`, 
  data() { 
    return { 
      data: {} 
    }; 
  }, 
  methods: { 
    getTimeString: function (value) { 
      return instance.formatDate(value, { skeleton: 'hm' }); 
    } 
  } 
}); 


Kindly try the above sample and let us know if this is helpful. 

Regards, 
Balasubramanian S 


Marked as answer
AM Amos July 13, 2020 02:52 PM UTC

Hi

Thanks.

1. Works but only the entry itself is colored. Can I color the date section as well? Can I also color the header?

2. I'm sorry but I'm not sure how the date picker is relevant here? I can select a date in agenda view but it goes forward,  I need it to go backward.

3. Please read again my question:
Each entry has the day section and for each day, the list of events for that day.
I want to show day/month/year (for example: yyyy-MM-dd) in the day section: How can I add the day/month/year to the date/day part of each entry?

Thanks

BS Balasubramanian Sattanathan Syncfusion Team July 14, 2020 04:42 PM UTC

Hi Amos, 
 
Thanks for the update. 
 
Query: 1 
We can achieve your requirement by making use of the below CSS for the appointment. 
 
<style> 
.e-appointment .time { 
    background: #85e0cf; 
} 
.e-appointment .subject { 
    background: #f187cb; 
} 
</style> 
 
Query: 2 
We have tried to understand your requirement. But unfortunately, we are unable to figure it out. So could you please share your requirement with more details like below? 
  • Share  the use case scenario with details or
  • Share the video presentation of your requirement
 
Query: 3 
We have validated your requirement at our side and we suspect that your need is to format the Scheduler date/appointment dates, which can be possible by making use of the dateFormat property and the below code snippet. 
 
getTimeString: function (value) { 
  return instance.formatDate(value, { skeleton: 'full' }); 
} 
 
 
Kindly try the above sample and let us know if you need further assistance. 
 
Regards, 
Balasubramanian S 


AM Amos July 14, 2020 05:13 PM UTC

Hi

1. I remind you that this is agenda, so the correct styles were
.e-agenda-cells {
    background-color: #e5eefc !important;
}

.e-agenda-item {
    background-color: #e5eefc !important;
}
Thanks for the idea what to look for :)

2. At the moment, when I set selectedDate = new Date(); the days starts today and go forward as I scroll down the agenda,
I want the dates to go backwards. Here is an image as an example. See that the dates go backwards as you go down?

3. I'm not talking about the entry itself, I'm talking about the day section, see image below

BS Balasubramanian Sattanathan Syncfusion Team July 15, 2020 06:21 PM UTC

Hi Amos, 

Thanks for the update. 

Query 1: 
We are happy that you have found the solution at your end. 
 
Query 2: 
We have validated your requirement “I want the dates to go backwards. Here is an image as an example. See that the dates go backwards as you go down?” at our side and we regret to let you know that this is not feasible at our side. Kindly refer the below UG to more details about Agenda view 
 
 
Query 3: 
We have validated your requirement at our side and prepared a sample by making use of the dateHeaderTemplate like the below code snippet. 
 
var dateHeaderTemplateVue  = Vue.component('dateHeaderTemplate', { 
  template:`<div class="date-text" v-html="getDateHeaderText(data.date)"></div>'`, 
  data() { 
    return { 
      data: {} 
    }; 
  }, 
  methods: { 
    getDateHeaderText: function (Date) { 
        return instance.formatDate(Date, { skeleton: 'yMd' }); 
    } 
  } 
}); 
 

Kindly try the above solution and let us know if this is helpful. 

Regards, 
Balasubramanian S 


AM Amos July 15, 2020 07:39 PM UTC

2. I understand.
Any chance this can be added as a feature request?
Is there another component I can use to achieve this?

3. Magnificent!

Thanks


VM Vengatesh Maniraj Syncfusion Team July 16, 2020 05:06 AM UTC

Hi Amos, 

Thanks for the update. 

We have re-evaluated your requirement that “Dates to go backward” and we suggest you please enable the allowVirtualScrolling field for the Agenda view. Please refer to the below sample. 


Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Vengatesh 



AM Amos July 16, 2020 09:13 AM UTC

Hi

set it to true
:allowVirtualScrolling="virtualscroll"
virtualscroll: true,

It had no effect on the dates to go backwards. Not sure why it would.
My questions remain:
Any chance this can be added as a feature request?
Is there another component I can use to achieve this?
In the meantime, is there a way to force-scroll the agenda content to the bottom? This way it will start from the newest one which is in the bottom of the list.
Thanks

VM Vengatesh Maniraj Syncfusion Team July 17, 2020 12:17 PM UTC

Hi Amos, 

Sorry for the inconvenience. 

We have to clarify the behavior of the allowVirtualScrolling functionality in the Agenda view how it works that it allows us to go backward and forward the date which is having an appointment. If the previous/next date does not have the appointment, we can’t go backward/forward that is the behavior. Since we can go forward and backward date by making use of the allowVirtualScrolling, we let you know that the separate feature implementation is not required for this scenario.  For your reference, we shared the video demo of it that can be available in the below link. 


And, we checked your another requirement “is there a way to force-scroll the agenda content to the bottom” and we can achieve this scenario by making use of the created and dataBound events like the below code. 

    onCreated: function(args) { 
      this.isInitial = true; 
    }, 
    onDataBound:function(){ 
      if(this.isInitial){ 
        //we can set the scroll top based our requirement.  
        document.querySelector('.e-content-wrap').scrollTop = 100; 
        this.isInitial = false; 
      }       
    } 

For your reference, we prepared the sample to force the Agenda content down at the initial loading. Please refer to the below sample. 

Please let us know if you need any further requirement. 

Regards, 
Vengatesh  


AM Amos July 17, 2020 01:52 PM UTC

Hi

The scrollTop works as expected, thanks, but I think this is good as a workaround.

Can I ask to add agenda going backwards as a feature request?

VM Vengatesh Maniraj Syncfusion Team July 20, 2020 05:11 AM UTC

Hi Amos, 

We are happy that our solution has worked as your expectations. 

And, since we already covered the functionality to Agenda going backward in the allowVirtualScrolling property, we regret to let you know that we couldn’t consider this as a feature request. 

Note: We can go backward without setting the scrollTop that we can showcase through video demo in our previous update. 

Regards, 
Vengatesh  


AM Amos July 20, 2020 05:39 AM UTC

By going backward I mean this, it starts with today (for example) and as you scroll down, the date go back.
As you can see the dates go back as we scroll down. In agenda view and also in your movie, the dates go forward as you scroll down.

Since this is not possible with the agenda, I hope you will re-consider it as a feature request. Thanks.


VM Vengatesh Maniraj Syncfusion Team July 21, 2020 01:19 PM UTC

Hi Amos, 

Thanks for the update. 

We checked your requirement “process the backward dates while scrolling down” at our end and we have to let you know that we have processed the Agenda view date process while scrolling is based on the Google Calendar standard. Accordingly, while scrolling down the Agenda content the forward date events will be processed and while scrolling up, the backward date events will be processed. Since this is the Agenda view behavior, we regret to let you know that we couldn’t achieve “Backward date processing while scrolling down” by workaround and couldn’t implement this scenario  as a feature in source end. 

Regards, 
Vengatesh  


Loader.
Up arrow icon