Update: If you came here via search engine looking for a “jQuery scheduler,” this might not be what you’re looking for. If you’re looking for something like Google Calendar where you can schedule events, try Ext Scheduler, wdCalendar, or FullCalendar. Here are a few more.

Hey, check out my new app. ^_^

It’s been a while since I coded something up. I’ve been meaning to get back into doing side projects, but it’s not always easy finding free time after work.

One of my friends wanted an easier way to create schedules for employees, so I decided to give this a shot. The scheduler app is what I came up with.

It’s a super simple app written entirely in HTML, CSS, and JavaScript, with jQuery and jQuery UI. I’m pretty satisfied with how it turned out! I’ll walk through how I made it so you can see how simple it was to make.

So, what’s the problem?

When you’re writing software, you’re solving some type of problem. The problem could be something complex like performing a real-world 3D simulation, or it could be something as simple as a video game that’s meant to keep you entertained.

In this case, here’s the problem statement:

You’re in charge of a building with a specific set of shifts that people can work. It’s your job to figure out who works when. When you’ve got over a dozen employees telling you which hours they’re available to work, what’s an easy way to come up with a schedule?

The Solution

When I first thought about the problem, I made it harder than it really was. I thought, given a set of hours, how do I calculate a set of possible schedules? Before I got too heavy into exploring some algorithms, I realized just how simple the problem really was.

The set of solutions is already defined. Once you put together everyone’s available hours, the only thing left to do is to pick a random person for each shift, and then you’re done.

Usability, Usability, Usability

Once I realized that this app would boil down to a simple random function, I decided to focus on the design of the app. Specifically, what’s something that would be easy to use? If it’s not easy to use, then it’s not worth using, especially if this is supposed to be something that saves you the time of having to manually create a schedule yourself.

I thought of a few ways the user could enter in employees’ available times:

• Checkboxes. Display a table of employees and times, and check the available times.
• Text boxes. Display a table of times, and enter in the names of available employees in each box.
• Click and drag. Display a table of times, and click and drag the available times for each employee.

Having to check several dozen checkboxes would be laborious. Text boxes would be simpler, but it’s still not that elegant enough. Click and drag turned out to be my favorite option.

Writing the Code

I barely did anything for this app. jQuery did all the work for me. I used jQuery’s Selectable plugin for letting the user click and drag times, and I used Mike Branski’s Random Child plugin for randomly choosing employees for time slot. (On a random side note, I noticed that, like me, Mike Branski is also a 23-year-old developer from Wisconsin. Funny coincidence, hehe.)

To represent the schedule, I made a simple HTML table:

<table id="schedule">
		<thead>
			<tr>
				<th>Time</th>
				<th>Monday</th>
				<th>Tuesday</th>
				<th>Wednesday</th>
				<th>Thursday</th>
				<th>Friday</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>6:30am - 8:30am</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>11:15am - 12:45pm</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>3:00pm - 5:00pm</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>5:00pm - 7:00pm</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th>7:00pm - 9:00pm</th>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table> 

I hard-coded the times, since there was no requirement that the times needed to be changeable. (I plan to add that feature in the future, though.)

To let the user add employees to this schedule table, I created an “Add Employee” button that triggers this code when clicked:

$schedule.selectable({ filter: 'td' });

The user is given an input field for entering in a name. After they’re done selecting times on the schedule and click “Add,” this code adds the employee’s name to each selected box in the schedule:

var employeeName = $employee_name.val();
		employeeName = $.trim(employeeName);
		var $selected = $('.ui-selected');
		var employee = '<span class="employee deletable">' + employeeName + '</span>';
		$selected.append(employee);

jQuery’s Selectable plugin gives selected elements the class name of “ui-selected.” I use jQuery to grab all the table cells that the user has selected, and then I insert a

Once the user’s done entering employees into the scheduler, the “Generate Schedule” button will create a new table for them, which displays a random schedule.

// "Generate Schedule" Button
	$('#generate').click(function() {
		$clone.empty();
		$schedule.clone().removeAttr('id').addClass('cloned').appendTo($clone);
		$clone
			.find('.deletable').removeClass('deletable').end()
			.find('.ui-selected').removeClass('ui-selected').end()
			.find('.cloned tbody td').randomChild();
		return false;
	});

Basically, a new

randomChild() on each cell. What this does is choose a random child of the specified element, then makes all other siblings hidden.

And there you have it. Nothing is saved on the server; it’s a simple client-side JavaScript app. My friend is pretty happy with it. It’s easy to use and gets the job done. ^_^

Check it out for yourself if you like.

The HTML, CSS, and JavaScript took me only a few hours to make. It was a fun mini project, though, and it gives me a few ideas for making other projects.

Update: I’ve made some changes since this original post.