Properties not functioning in add event

Asked by Jeff Kurzner
6 years ago.

Using the following to create a new event by clicking or creating a range on the scheduler. The event gets created, but none of the properties for backPattern, repeat, backColor, or cssClass have any effect.

dp.onTimeRangeSelected = function (args) {
	var modal = new DayPilot.Modal();
	modal.onClosed = function(args) {
		dp.clearSelection();
		var data = args.result;
		if (data.gender == 'M') {var bcolor ='blue'} else {var bcolor = 'pink'};
		if (data && data.result === "OK") { 
        	dp.clearSelection();
        	var e = new DayPilot.Event({
            	start: data.start,
            	end: data.end,
            	id: data.id,
            	resource: data.resource,
				barColor: bcolor,
				html: data.html,
				detail: data.detail,
				cssClass: 'extgame',
				backColor: '#ffffff',
				backImage: '/media/images/tweed.png',
				backRepeat: 'repeat',
            	                text: data.text
        	});
        dp.events.add(e);
		dp.message(data.message); 
		}
	};
	modal.showUrl("newcalevent.php?start=" + args. start + "&end=" + args.end + "&resource=" + args.resource + "&userid=" + '<?php echo $UserID;?>');
};

how-to javascript

Answer posted by Dan Letecky [DayPilot]
6 years ago.

I've tested it by adding this to the main scheduler demo page (https://javascript.daypilot.org/demo/scheduler/) and it seems to work fine:

    dp.onTimeRangeSelected = function (args) {
        dp.clearSelection();
        var e = new DayPilot.Event({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            resource: args.resource,
            barColor: "red",
            cssClass: 'extgame',
            backColor: '#ffffff',
            backImage: '/media/images/tweed.png',
            backRepeat: 'repeat',
            text: "event"
        });
        dp.events.add(e);
        dp.message("done");
    };

Just a few things:

1. Make sure that you don't override the values in onBeforeEventRender (it's fired for events added using events.add() as well).

2. The "backColor" translates to "background" inline css style. That allows overriding the event style from the default theme which uses background gradient specified using "background" CSS property. It's necessary to take t into account when specifying the related values (backImage, backRepeat, etc.). The best way is to use CSS instead.

3. You can check if the CSS class is actually applied by using the browser developer tools (inspect the element). The custom class is applied at the ".scheduler_default_event" level but most styles in the theme are defined on the child element (".scheduler_default_event_inner").

If you use CSS to override the event styles make sure that your selectors are more specific than those used in the default theme.

.scheduler_default_event.extgame .scheduler_default_event_inner {
  background-image: unset;
  background-color: red;
}

You can only override the inline styles if you add !important to the CSS class.

Comment posted by Jeff Kurzner
6 years ago.

It is probably being overriden by the onBeforeEventRender. I'll check that first. Thanks Dan.

Answer posted by Jeff Kurzner
6 years ago.

Solved the issue. Apparently I was not posting back all of the values needed for the onBeforeEventRender to manage the display properly. Once that was don't everything worked great.

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.