Our pure JavaScript Scheduler component


Post by Exigo »

Hello,

I am kind of stuck trying to get my events to respect the cls properties i try to pass to them. I have the following setup, trying to follow your guides.

Scheduler:

this.scheduler = new Scheduler({
      readOnly: true,
      appendTo: this.schedulerRef.nativeElement,
      eventRenderer: this.scheduleCtrl.eventRenderer,
      viewPreset: 'weekAndMonth',
      fillTicks: false,
      weekStartDay: 1,
      autoAdjustTimeAxis: false,
      startDate: new Date(),
      rowHeight: 35,
      barMargin: 3,
      forceFit: false,
      workingTime: { fromDay: 1, toDay: 6 },
      columns: [
        {
          type: 'tree',
          tree: true,
          text: this.translationService.getTranslation('schedules.locations'),
          field: 'name',
          width: 200
        }
      ],
      features: {
        tree: true,
        stripe: false,
        nonWorkingTime: true,
        eventResize: {
          showExactResizePosition: true
        },
        timeRanges: {
          showCurrentTimeLine: true
        }
      },
      maxZoomLevel: 14,
      minZoomLevel: 3
      
});
// I later pass these to the scheduler this.scheduler.eventStore.data = this.events; this.scheduler.resourceStore.data = this.resources;

CSS:

.b-sch-event.test {
  border-radius: 30px;
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
}

The following pictures show the event data available and the html showing that is finds the "test" cls property

event data.PNG
event data.PNG (14.24 KiB) Viewed 845 times
html test.PNG
html test.PNG (16.17 KiB) Viewed 845 times

Do you have any suggestions as to why I cannot overwrite the properties of the events with this "test"?
(I use eventrenderer to do the basic formatting, which works fine. But wanted cls property to add specific styling to the individual event - like Highlights (tried your example which is where I started to spot this being a problem for me))


Post by mats »

Take a look inte DOM styles panel in the Chrome dev tools and it'll tell you what's overriding your styles. Likely you just need more specificity. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity


Post by Exigo »

Hey,

It is as if the DOM styles panel never gets the css. is it not correct to use this css tag to refer to it?

.b-sch-event.test {
  border-radius: 30px !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  padding: 0 !important;
}

I tried to use important to overwrite any other for a testcase scenario. However if it is not shown in dom then I guess it is something completly different


Post by mats »

Looks correct, if you can provide us a test case we'll have a look at it.


Post Reply