We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change days name, display multiple months vertically, fill the whole cell (React)

Hi team,

I have a few questions in order to customize the scheduler :

- How to change the name of the days in the header of the month view ? (I'd like : "L M M J V S D")

- How to display six months vertically, separated by the month name and a divider. I tried Custom view but I failed to achieve my goal.

- How to allow only one event per cell and fill with a color depending of its event category ?

If I should have done one thread per question, just tell me and I'll do it after deleting this one.
Also, if each answer takes time, do not hesitate to answer the questions one by one.

Thanks guys

Best regards,

Ronan

7 Replies

NR Nevitha Ravi Syncfusion Team September 2, 2019 09:29 AM UTC

Hi Ronan, 

Greetings from Syncfusion Support. 

Q: How to change the name of the days in the header of the month view ? (I'd like : "L M M J V S D") 
We can customize the header cells of month view with the help of renderCell event and for the same we have prepared a sample for your reference which can available from the following link. 

.e-schedule .e-header-cells span { 
  display:  none; 
} 
 
    getDateHeaderText(value) { 
        return this.instance.formatDate(value, { skeleton: 'E' }); 
    } 
    onRenderCell(args) { 
        if (args.elementType === 'monthDay' && this.scheduleObj.currentView === 'Month') { 
            let ele = document.createElement('div'); 
            ele.innerHTML = this.getDateHeaderText(args.date); 
            (args.element).appendChild(ele.firstChild); 
        } 
    } 
 
Q: How to display six months vertically, separated by the month name and a divide 
We can display n number of months in the scheduler using interval option within view property. Please check the following sample meets your requirement. 

              <ViewsDirective> 
                <ViewDirective option='Month' displayName='6 Month' interval={6}/> 
              </ViewsDirective> 
 
Q: How to allow only one event per cell and fill with a color depending of its event category ? 
We can restrict the appointment creation if the time slot is already occupied using isSlotAvailable public method. Please refer the following UG and online demo. 

We can change the event color based on the category field using eventRendered event and for the same please refer the following UG and online demo link. 

Regards, 
Nevitha 



RC Ronan Ca September 2, 2019 11:25 AM UTC

Hello,

Thanks for your answer.

Q: How to change the name of the days in the header of the month view ? (I'd like : "L M M J V S D")
Your example works, thank you. In order to have the week days in french, I'd like to translate the whole Scheduler, but in your react docu you are using typescript.
I'm using nodejs: do you have an example to translate the scheduler according to nodejs & react syntax ?

Q: How to display six months vertically, separated by the month name and a divider ?
Your link is wrong, it leads to the first example. Btw, can the months be stricly separated ?

Q: How to allow only one event per cell and fill with a color depending of its event category ?
Thanks, it seems enough to achieve what I want to.

Regards

Ronan





VM Vengatesh Maniraj Syncfusion Team September 3, 2019 01:43 PM UTC

Hi Ronan Ca, 
 
Thanks for your patience.  
 
Q: How to change the name of the days in the header of the month view ? (I'd like : "L M M J V S D") 
 
We have analysed your query and prepared sample based on your requirement with `fr` culture. Please find the below sample from below link. 
 
Q: How to display six months vertically, separated by the month name and a divide 
 
Currently there is no support for this case from our end to meet your requirement. 
 
Regards, 
Vengatesh 



RC Ronan Ca September 11, 2019 08:35 AM UTC

Hello,
I'm currently trying to use your french translation example.
When transfering it in my project, I get the same error from this post  (TypeError: can't convert undefined to object ; getDayNames) :
I can't manage to make the provided solution working because it is intended to angular programming (with typescript).
I also tried to download your working example from stackblitz and start it on my pc but I'm getting the same error.
Would you help me please by providing a solution for react and node.js (still using package.json and npm but no typescript at all)

Best regards,

Ronan


KK Karthigeyan Krishnamurthi Syncfusion Team September 12, 2019 09:10 AM UTC

Hi Ronan 
  
Thanks for the update. 
 
We have prepared the locale sample for your reference, kindly run the below commands to run the sample. 
 
npm install 
npm start 
 
Regards, 
Karthi 



RC Ronan Ca September 12, 2019 09:34 AM UTC

Hello Karthi,

Thanks for the update but I'm saying that I can't use typescript: "react and node.js (still using package.json and npm but no typescript at all)"
May I ask you to make the same example using
ES6 please?

Regards

Ronan


VD Vinitha Devi Murugan Syncfusion Team September 13, 2019 01:16 PM UTC

Hi Ronan, 
 
Thanks for your patience. 
 
We have prepared the locale sample using es6 for your reference. 
 

var numberingSystems = require('cldr-data/supplemental/numberingSystems.json'); 
var gregorian = require('cldr-data/main/fr-CH/ca-gregorian.json'); 
var numbers = require('cldr-data/main/fr-CH/numbers.json'); 
var timeZoneNames = require('cldr-data/main/fr-CH/timeZoneNames.json'); 
 
loadCldr(numberingSystems,gregorian, numbers, timeZoneNames); 


Regards, 
M.Vinitha devi. 



Loader.
Up arrow icon