Our powerful JS Calendar component


Post by phil@customd.com »

I'm trying to change the format of the event dates in the start and end date inputs. Looking at the live demo example I see the config has dateFormat: 'DD MMM YYYY' but the live example doesn't display the dates in that format. Is this the correct config, if not how is it done in React?

export const calendarConfig = (profileId, isMobile) => {
  return {
    tbar: {
      items: {
        todayButton: false,
        prevButton: false,
        nextButton: false,
      },
    },

// Not enough space to show the sidebar with the month calendar indicator
// and calendar selector.
sidebar: false,

// Start life looking at this date
date: '2020-05-14',

// Used to create view titles
dateFormat: 'DD MMM YYYY',

// All modes re included by default.
// Each can be reconfigured from the default by using an object.
// Each may be omitted by configuring as false
modes: {
  week: {
    dayStartTime: 8,
  },
  day: {
    dayStartTime: 8,
  },
},

height: 700,
  };
};

Post by pmiklashevich »

It's easy to achieve. Please see the config: https://www.bryntum.com/docs/calendar/#Calendar/feature/EventEdit#config-dateFormat

const calendar = new Calendar({
    features : {
        eventEdit : {
            dateFormat : 'DD MMM YYYY'
        },

In case of React please configure eventEditFeature instead:

const calendarConfig = {
        eventEditFeature : {
            dateFormat : 'DD MMM YYYY'
        },

Regarding the config you referred to (https://www.bryntum.com/docs/calendar/#Calendar/view/Calendar#config-dateFormat), it's a config to describe the title in the toolbar above each view. There is a bug with it: https://github.com/bryntum/support/issues/2969 If you need to change the title, please use https://www.bryntum.com/docs/calendar/#Calendar/widget/DayView#config-descriptionRenderer instead.

Pavlo Miklashevych
Sr. Frontend Developer


Post by phil@customd.com »

Thanks. That worked perfectly


Post Reply