search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Properties not functioning in add event

Asked by Jeff Kurzner
1 month 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;?>');
};
Answer posted by Dan Letecky [DayPilot]
29 days 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
29 days ago.

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

Answer posted by Jeff Kurzner
29 days 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.

New Reply
This reply is
Your name (optional):