Custom Scheduler View - Resources

[Alex Hitchins, modifié il y a 8 années.]

Hello All,

I would like to create a custom view for the Scheduler component that will appear like the week view however rather than seven columns (one for every day of the week) I'd like n number of columns that represent resources rather than days, such as rooms/equipment etc.

Has anyone already achieved this? If not, does the community think it is possible?

All help gratefully received.

Many thanks,

Alex

[Andew Jardine, modifié il y a 8 années.]

Hi Alex,

I'm not familiar with the scheduler component. Are you referring to the Calendar Portlet? (or perhaps this is a portlet I have not used before )

[Aston Pearl, modifié il y a 8 années.]

You can do this using aui scheduler tag. It pretty simple. All you have to do is use the tag and pass the appropriate values.

Refer following link for more details:
Scheduler

thanks !!

[Alex Hitchins, modifié il y a 8 années.]

Tags... Interesting

I will take a look at the documentation and see if this can be used to get a solution working for me.

Thanks for the tip!

[Alex Hitchins, modifié il y a 8 années.]

Aston Pearl:

You can do this using aui scheduler tag. It pretty simple. All you have to do is use the tag and pass the appropriate values.

Refer following link for more details:
Scheduler

thanks !!

Sorry - I know I am probably looking right at it, but could you direct me to the necessary page in the API guide? I just can't find any tags.

[Aston Pearl, modifié il y a 8 années.]

Oopss... My bad. Sorry for putting aui scheduler tag.

Its actually AUI function. Just a basic example, how you can use it. Scheduler Basic Example

[Adam Victor Brandizzi, modifié il y a 8 années.]

Hello Alex!

Alex Hitchins:

I would like to create a custom view for the Scheduler component that will appear like the week view however rather than seven columns (one for every day of the week) I'd like n number of columns that represent resources rather than days, such as rooms/equipment etc.

Has anyone already achieved this? If not, does the community think it is possible?

Is it possible? Probably. Will it be easy? Probably not.

You would be pushing the scheduler views beyond their initial proposal. They are not that extensible - almost all extensibility was thought to Liferay's internal needs - which is sad.

But it is, yes, possible! In fact I do a lot of these heavy-handed tunings at the calendar every day. It is not trivial but perfectly feasible, although a bit demanding. Yet, even with the complications, I believe it can worth the hassle - compared to reimplementing everything.

I am sorry I cannot write a nice tutorial on how to do it. I do not have much time due to my daily attributions. So, I wrote a small project with an example and shared it at GitHub. My approach was to heavily extend the day view to meet your needs. The result is far from complete but can make it easy to you to start. Each commit contains a detailed explanation of what is going on, so go reading from the first one until the last.

Of course, feel free to ask us any other doubts. I believe that, after this boost, you may have more manageable questions and it will be a pleasure to answer them

Good luck and let me know of the results. Also sorry for my text, I'm a bit tired here

[Maros Groninger, modifié il y a 8 années.]

Hi,
I have implemented your project. It works really well and I would like to ask you, if it is possible to change how many hours we can see.
So from default 24 hours i would like to display for example hours from 10 to 24. Would such a thing be possible?

PS: I know this thread is year old, but it is worth a shot

[Víctor Ponz, modifié il y a 8 années.]

Hi.
I have created a custom view to display a classroom TimeTable extending SchedulerDayView. Here is the some of the code I use to overwrite it

var SchedulerTimetableView = A.Component.create({

    NAME: SCHEDULER_VIEW_TIMETABLE,

    ATTRS: {
		.....
        days: {
            value: 5  /* Monday to Friday*/
        },
		....
},

    EXTENDS: A.SchedulerDayView,
....

...

_valueTimesNode: function() {
            var instance = this;
			instance.initTimeTable();
            var isoTime = instance.get('isoTime');
            var buffer = [],
                hour;
			var timetable = instance.get("timetable");

			for (var i = 0; i < timetable.length; i++){
				var hour = ("0" + timetable[i].getHours()).slice(-2);
				var minutes =  ("0" + timetable[i].getMinutes()).slice(-2) ;
				var nextHour = 24;
				var nextMinutes = 0;
				if ( i < (timetable.length -1)){
					nextHour = timetable[i+1].getHours();
					nextMinutes = timetable[i+1].getMinutes();
				}
				buffer.push(
		            Lang.sub(
		                TPL_SCHEDULER_VIEW_DAY_TABLE_TIME, {
		                    hour: hour + ":" + minutes,
							dataHour: timetable[i].getHours(),
							dataMinutes: timetable[i].getMinutes(),
							height: (nextHour * 60 + nextMinutes) - (timetable[i].getHours() * 60 + timetable[i].getMinutes())
		                }
		            )
		        );
				
			}
            return A.NodeList.create(buffer.join(_EMPTY_STR));
        },

[b]initTimetableHoursCol:[/b] function(calendarBookings) {
			var col = A.one(".scheduler-view-day-table-col.scheduler-view-day-table-coltime.timetable");
			if (col){
		        var instance = this;
				instance.initTimeTable(calendarBookings);
		        var isoTime = instance.get('isoTime');
		        var buffer = [],
		            hour;
				var timetable = instance.get("timetable");

				for (var i = 0; i < timetable.length; i++){
					var hour = ("0" + timetable[i].getHours()).slice(-2);
					var minutes =  ("0" + timetable[i].getMinutes()).slice(-2) ;
					var nextHour = 24;
					var nextMinutes = 0;
					if ( i < (timetable.length -1)){
						nextHour = timetable[i+1].getHours();
						nextMinutes = timetable[i+1].getMinutes();
					}
					var mh = instance.getFringeProps(timetable[i].getHours() + ":" + timetable[i].getMinutes());
					var cssClass = "";
					if (mh.libre)
						cssClass = "libre ";
					buffer.push(
				        Lang.sub(
				            TPL_SCHEDULER_VIEW_DAY_TABLE_TIME, {
				                hour: hour + ":" + minutes,
								dataHour: timetable[i].getHours(),
								dataMinutes: timetable[i].getMinutes(),
								//height: MINUTE_HEIGHT * ((nextHour * 60 + nextMinutes) - (timetable[i].getHours() * 60 + timetable[i].getMinutes()))
								height: mh.minuteHeight * ((nextHour * 60 + nextMinutes) - (timetable[i].getHours() * 60 + timetable[i].getMinutes())),
								cssClass:cssClass
				            }
				        )
				    );
				
				}
				col.setHTML(buffer.join(_EMPTY_STR));
			}
        },

initTimetableHoursCol is called in javascript.js located under docroot/js/ of the calendar portlet

plotCalendarBookings: function(calendarBookings) {
						var instance = this;
						var events = [];
						var calendarEvents = {};
						instance.calendarBookings = calendarBookings
						AArray.each(
							calendarBookings,
							function(item, index) {
								var calendarId = item.calendarId;

								if (!calendarEvents[calendarId]) {
									calendarEvents[calendarId] = [];
								}

								var schedulerEvent = CalendarUtil.createSchedulerEvent(item);

								schedulerEvent.set(
									'scheduler',
									instance,
									{
										silent: true
									}
								);

								events.push(schedulerEvent);
								calendarEvents[calendarId].push(schedulerEvent);
							}
						);

						instance.resetEvents(events);

						A.each(
							Liferay.CalendarUtil.availableCalendars,
							function(item, index) {
								item.reset(calendarEvents[index]);
							}
						);

						if (instance.get('rendered')) {
							instance.syncEventsUI();
						}

						//Mestre@casa
						[b]var activeView = _1_WAR_calendarportlet_scheduler.get('activeView').get('name');
						if (activeView == "timetable"){
							_1_WAR_calendarportlet_timetableView.initTimetableHoursCol(calendarBookings);
							var addBtn = A.one(".calendar-add-event-btn");
							if (addBtn)
								addBtn.setStyle("display", "none");
						}[/b]

						CalendarUtil.message(STR_BLANK);

					},

Hope it helps.