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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147062 Aug 30,2019 11:32 AM UTC Sep 13,2019 01:16 PM UTC React - EJ 2 7
loading
Tags: Schedule
Ronan Ca
Asked On August 30, 2019 11:32 AM UTC

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

Nevitha Ravi [Syncfusion]
Replied On 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 


Ronan Ca
Replied On 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




Vengatesh Maniraj [Syncfusion]
Replied On 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 


Ronan Ca
Replied On 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

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


Ronan Ca
Replied On 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

Vinitha Devi Murugan [Syncfusion]
Replied On 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. 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon