Buy me a coffee :)

Wicket - jQuery UI

jQuery UI integration in Wicket 6.x, Wicket 7.x , Wicket 8.x & Wicket 9.x

Scheduler, with multiple resource types




Components / Samples

Description

This sample shows some of the Kendo UI's scheduler capabilities.

Since

wicket-kendo-ui-6.18.0

Licensing

Kendo UI "Core" is Apache License 2.0 licensed, starting from version 2014.1.416.
Prior to version 2014.1.416, Kendo UI "Web" was licensed under GPLv3.

A pro version - with a commercial license - is also available, it provides additional widgets like the Grid (DataTable), the Scheduler and the Editor.
To be able to use it, you need to change the ResourceReference with kendo.all.min.js

See also

[howto]-change-resource-references

Sources

  • Java
  • HTML
  • CSS
package com.googlecode.wicket.jquery.ui.samples.kendoui.scheduler;

import java.time.ZonedDateTime;
import java.util.Collection;
import java.util.Date;
import java.util.List;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.form.ChoiceRenderer;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.Model;
import org.apache.wicket.util.lang.Generics;

import com.googlecode.wicket.jquery.core.Options;
import com.googlecode.wicket.jquery.core.resource.StyleSheetPackageHeaderItem;
import com.googlecode.wicket.jquery.core.utils.RequestCycleUtils;
import com.googlecode.wicket.jquery.ui.samples.data.dao.scheduler.EmployeeEventsDAO;
import com.googlecode.wicket.kendo.ui.form.button.AjaxButton;
import com.googlecode.wicket.kendo.ui.form.multiselect.MultiSelect;
import com.googlecode.wicket.kendo.ui.panel.KendoFeedbackPanel;
import com.googlecode.wicket.kendo.ui.scheduler.Scheduler;
import com.googlecode.wicket.kendo.ui.scheduler.SchedulerEvent;
import com.googlecode.wicket.kendo.ui.scheduler.SchedulerModel;
import com.googlecode.wicket.kendo.ui.scheduler.resource.Resource;
import com.googlecode.wicket.kendo.ui.scheduler.resource.ResourceList;
import com.googlecode.wicket.kendo.ui.scheduler.resource.ResourceListModel;

public class MultipleResourceSchedulerPage extends AbstractSchedulerPage // NOSONAR
{
	private static final long serialVersionUID = 1L;

	public MultipleResourceSchedulerPage()
	{
		// Form //
		final Form<Date> form = new Form<Date>("form");
		this.add(form);

		// FeedbackPanel //
		final KendoFeedbackPanel feedback = new KendoFeedbackPanel("feedback", new Options());
		form.add(feedback.setOutputMarkupId(true));

		// MultiSelect //
		final MultiSelect<Resource> multiselect = new MultiSelect<Resource>("rooms", Model.ofList(newRoomList()), newRoomList(), new ChoiceRenderer<Resource>("text"));
		form.add(multiselect);

		// Scheduler //
		Options options = new Options();
		options.set("date", "Date.now()");
		options.set("editable", true); // default
		options.set("views", "[ { type: 'day', showWorkHours: true }, { type: 'week', showWorkHours: true, selected: true }, { type: 'month' } ]");
		options.set("workDayStart", "new Date('2014/1/1 08:00 AM')");
		options.set("workDayEnd", "new Date('2014/1/1 6:00 PM')");

		final Scheduler scheduler = new Scheduler("scheduler", newSchedulerModel(), options) { // NOSONAR

			private static final long serialVersionUID = 1L;

			@Override
			protected void onConfigure()
			{
				super.onConfigure();

				Collection<Resource> rooms = multiselect.getModelObject();

				if (!rooms.isEmpty())
				{
					this.getResourceListModel().clear();
					this.getResourceListModel().add(newRoomList(rooms));
					this.getResourceListModel().add(newEmployeeList());
				}
				else
				{
					this.warn("No room is selected");

					AjaxRequestTarget target = RequestCycleUtils.getAjaxRequestTarget();

					if (target != null)
					{
						feedback.refresh(target, true);
					}
				}
			}

			@Override
			public void onCreate(AjaxRequestTarget target, SchedulerEvent event)
			{
				EmployeeEventsDAO.get().create(event);

				this.info("Created: " + event);
				target.add(feedback);
			}

			@Override
			public void onUpdate(AjaxRequestTarget target, SchedulerEvent event)
			{
				EmployeeEventsDAO.get().update(event);

				this.info("Updated: " + event);
				target.add(feedback);
			}

			@Override
			public void onDelete(AjaxRequestTarget target, SchedulerEvent event)
			{
				EmployeeEventsDAO.get().delete(event);

				this.info("Deleted: " + event);
				target.add(feedback);
			}
		};

		form.add(scheduler);

		// Buttons //

		form.add(new AjaxButton("refresh") { // NOSONAR

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				target.add(scheduler);
			}
		});
	}

	// Methods //

	@Override
	public void renderHead(IHeaderResponse response)
	{
		super.renderHead(response);

		response.render(new StyleSheetPackageHeaderItem(MultipleResourceSchedulerPage.class));
	}

	// Factories //

	static SchedulerModel newSchedulerModel()
	{
		// ISchedulerVisitor
		return new SchedulerModel() {

			private static final long serialVersionUID = 1L;

			@Override
			public List<SchedulerEvent> load(ZonedDateTime start, ZonedDateTime until)
			{
				return EmployeeEventsDAO.get().getEvents(start, until);
			}
		};
	}

	static ResourceListModel newResourceListModel()
	{
		ResourceListModel listModel = new ResourceListModel();

		listModel.add(newRoomList());
		listModel.add(newEmployeeList());

		return listModel;
	}

	static ResourceList newRoomList()
	{
		List<Resource> list = Generics.newArrayList();
		list.add(new Resource(EmployeeEventsDAO.ROOM_1, "Room #1", "#6699cc")); // using integer ids
		list.add(new Resource(EmployeeEventsDAO.ROOM_2, "Room #2", "#9966cc"));

		return newRoomList(list);
	}

	static ResourceList newRoomList(Collection<Resource> resources)
	{
		ResourceList list = new ResourceList("Room", EmployeeEventsDAO.ROOM_ID, "Rooms"); // grouping by "Rooms" (optional)

		for (Resource resource : resources)
		{
			list.add(resource);
		}

		return list;
	}

	static ResourceList newEmployeeList()
	{
		ResourceList list = new ResourceList("Employee", EmployeeEventsDAO.EMPLOYEE_ID, true); // true: multiple
		list.add(new Resource(EmployeeEventsDAO.EMPLOYEE_1, "Patrick", "#339966")); // using uuid-like ids
		list.add(new Resource(EmployeeEventsDAO.EMPLOYEE_2, "Sebastien", "#996633"));

		return list;
	}
}
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket Kendo UI: scheduler, with multiple resource types</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<form wicket:id="form">
		<select wicket:id="rooms" style="width: 460px;"></select>
		<button wicket:id="refresh" style="vertical-align: top;">Refresh</button>		
		<br/><br/>
		<div wicket:id="scheduler"></div>
		<br/>
		<div wicket:id="feedback"></div>
	</form>
</wicket:extend>
</body>
</html>
FORM>.k-multiselect {
	display: inline-block
}