Different display on weekends

[fbatiga]

Hello,

Is is possible to style the weekends differently ?

Currently it is difficult to plan tasks without resorting to a calendar to know when are the weekends.

[fbatiga]

@netchampfaris Do you know i could go about modifying the library to do this ?

[netchampfaris]

This is the part which highlights today's date: https://github.com/frappe/gantt/blob/master/src/index.js#L392

Maybe we could have a generic highlighter that can work on any date.

[jeffberube]

For what it's worth, I create a class called 'weekend-highlight' that I added to the .css sheet and modified the make_grid_highlights function like so:

    make_grid_highlights() {

	if (this.view_is('Day')) {

		const width = this.options.column_width;
		const height =
			(this.options.bar_height + this.options.padding) *
				this.tasks.length +
				this.options.header_height +
				this.options.padding / 2;

		let x = 0;

		for (let date of this.dates) {
							
			let y = this.options.header_height + this.options.padding / 2;

			let isToday = date.toString() == date_utils.today();
			let isWeekend = (date.getDay() == 0 || date.getDay() == 6);
			let className;

			if (isToday) {
				className = 'today-highlight';
				y = (this.options.header_height + this.options.padding) / 2; // This is so the day highlight doesn't extend into the months header
			} else if (isWeekend) {
				className = 'weekend-highlight';
			} 

			if (isToday || isWeekend) {
				createSVG('rect', {
					x,
					y,
					width,
					height,
					class: className,
					append_to: this.layers.grid
				});	
			}
			x += this.options.column_width;
		}
	}
    }

And also changed the order of make_grid so the ticks would appear above the highlights:

	make_grid() {
		this.make_grid_background();
		this.make_grid_rows();
		this.make_grid_header();
		this.make_grid_highlights();
		this.make_grid_ticks();
	}

This is what it looks like after a bit of styling: Screenshot

[zaubermann]

@netchampfaris Will you include this in a future update? I hope so :)

[prakash26sep]

Frappe, please consider this

[vaishyavivek]

@jeffberube any suggestion on how to apply your changes in an angular project? I tried adding these changes in node_modules/frappe_gantt/dist in an angular project with patch-package but the changes don't reflect. However, when I make the changes in a clone of frappe-gantt repo, the weekend highlights appear on index.html.

Any suggestions what I could be missing?

[erpnext-tm]

This would be a really handy feature - but we have thus far been unable to follow the above guidance. It would be great if someone could expand on the above guidance or push it into the core of Frappe?? @jeffberube

[ch-rigu]

Hi!, I've modified the library to highlight weekends,

here a screenshot: https://imgur.com/a/7J77YJn

at the moment is only working for "Day" view, but extend it to other views is easy. If is useful to other I can make a push request.

Cheers.

[LeeWheeler]

[ch-rigu] can you post your code please ? thanks

[bnhly]

@ch-rigu - what you've done looks great - hopefully you can share the code? This is really useful and a push request would be brilliant - thank you

A slight further improvement would be to shade the background of the weekends - refer attached concept image

[safwansamsudeen]

Hi everybody 👋🏽,

So this is closely related to #256 - except do you want to disable (exclude from calculation) or just highlight?

[netchampfaris]

@safwansamsudeen We should treat both of these as separate features. A feature to highlight arbitrary periods. And another feature to exclude certain periods from calculation.