May 1, 2010

Updating My Scheduler App with More CSS and JavaScript Goodness

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.

Remember the scheduler app that I wrote? It’s a tiny web app that doesn’t do much: You add a bunch of entries to a time slot, and it randomly picks an entry from each time slot. Essentially, you use it when you’ve got a lot of choices (e.g., scheduling volunteers to work at an event), and you’d like to have a random way of picking those choices.

Regardless of how simple it is, it was a perfect candidate on which for me to practice my JavaScript and CSS skills.

How do you organize jQuery code? How do you use CSS to make an intuitive UI? Those were the kinds of questions I tried to answer when fiddling with this web app. I’ll show you what I did to make it look cool and make it work the way I want.

Incremental Work

I made a few versions since I first wrote the app.

Scheduler 1.0

The first version of the app meets all the original requirements:

You can add names to the schedule.
You can generate a schedule with a name randomly selected from each time slot.

Scheduler 2.0

After getting the app to do what it’s supposed to do, I wanted to add a few more features, so I made version 2:

I changed “employee” to “entry.” I wanted to make it more generic.
You can edit the times. They’re still defaulted to certain hours (so it still meets my friend’s requirements), but now if other people want to use it, they can change the values to meet their needs.
You can add and delete rows. Now that you can edit the times and add/delete rows, the app is flexible enough to act as a crude calendar for scheduling appointments.
There’s a button to delete all entries. If you add too many entries and want to start over, there’s now an easy “reset” button.
I wanted to make the buttons look nicer.

Scheduler 2.1

After version 2, I thought I was done, but then after a while, I decided to make a tad more changes, so now there’s version 2.1:

The buttons are renamed and regrouped. “Delete All Entries” and “Delete Last Row” seemed too long, so I shortened them.
UI cues were added. When you hover over each button, I want the user to get an impression of what the effect would be. When the user clicks “- Row,” the last row is highlighted red, to cue the user that the last row will be deleted if the user clicks the button.

Pretty Buttons

I’m a good developer, but I suck at designing. Thankfully, though, there’s plenty of resources out there for me to work from.

The buttons in the first version of the app were a combination of icons from famfamfam and some inspiration from ParticleTree. For the later versions, I used a technique I read in a Smashing Magazine article. It uses some CSS3 techniques like border-radius, text-shadow, and box-shadow. IE doesn’t support any of it (as expected), but the button degrades nicely in IE, so I’m happy with that. Here’s the sample code from the article on how to style such a button:

button.awesome, .button.awesome {
	background: #222 url(/images/alert-overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

Because CSS3 isn’t officially supported in browsers yet, you have to use the browser-specific implementations for each browser: -moz-border-radius for Firefox and -webkit-border-radius for Safari and Chrome, for example. Also note that they use a PNG image overlay to give the button a cool gradient effect.

The buttons in version 2.1 have an extra bottom border, and I gave them different rounded edges for fun. When I regrouped the buttons together, making the “add” buttons green and the “delete” buttons red made it look too much like a Christmas-decorated button menu. So, I settled for them give a very subtle color on the bottom of the button, so the “add” and “delete” colors are still there, but it doesn’t look so Christmas-y.

Oh, and there’s one other thing I added, which I feel is important to the user experience of the app: I removed text selection on the buttons. Normally, when you double-click on text on a webpage, the web browser automatically selects that text for you. When you’re building a custom button in a web application, you don’t want that button text to be selected when a user clicks on it too many times. So, I discovered how to disable that behavior in each browser using jQuery:

$('.actions a')
	.attr('unselectable','on')
	.css('MozUserSelect','none')
	.bind('selectstart.ui', function() {
		return false;
	});

I forget which is which (obviously, “MozUserSelect” is referring to Firefox), but each line disables text selection for those action buttons in their respective web browsers. I’m sure this snippet of code will be very handy whenever I make any more web apps.

UI Cues

I liked the idea of having some sort of visible cue whenever the user hovers over a button. For instance, when you hover over “- Entries,” you’ll notice that all the entries on the schedule will be highlighted red. This helps illustrate the function of the button. To do this, I took advantage of jQuery’s hover() function. It allows you to specify a function to call on a button’s hover state, as well as a function to call when the cursor is no longer hovering over the button. When the cursor hovers over the “- Entries” button, the following function is called:

// Highlight entries to be deleted to cue user of deletion action
function removeEntriesHighlight() {
	$('.entry').addClass('deleting');
}

The “deleting” class is then styled with CSS to highlight the entries red.

Organizing JavaScript

Writing clean JavaScript code can be tricky. It seems as though everyone does it differently, depending on the coding style and what libraries are used. This is the approach I used:

Put plugin code in an anonymous function
Put the rest of your code in a domready block
Initialize reusable variables at the top of the domready block
Separate code into functions within that domready block
Have an init

So essentially, my code looks like this:

$(function() { // domready block

	// initialize variables
	var foo = 'bar',
		foo1 = 'bar2;

	// run
	init();

	function init() {
		// init code
		blah();
		blah2();
	}

	function blah() {
	}

	function blah2() {
	}

	// ... and so on
}

;(function($) {
	// custom jQuery plugin code goes here
})(jQuery);

It makes the code look fairly organized, or so at least I think it does. If you’ve got any better tips on writing clean jQuery code, let me know! I’m still learning and trying to come up with a best practice.

Version Control

Last but not least, there’s version control. As any good developer knows, you should use some type of version control system to manage your code. Otherwise, if your code gets accidentally lost or deleted, you can’t get it back!

I’ve been testing out Mercurial lately, and I really like it. It feels as easy to use as Subversion, and I’m really liking the whole idea of being able to commit locally vs pushing changes onto the server. If you haven’t given Mercurial a try yet, I highly recommend it.

BitBucket offers free Mercurial hosting, so I’ve been using that to host the source code for my scheduler app. Feel free to check out my source code if you like. :)

Well, that’s all I’ve got. I hope that was informative. If you’ve got any JavaScript or CSS tips or perhaps any suggestions for my web app, let me know.

Word image made with Wordle.

JR Code 14 css, javascript, jquery

Linda

Very cool scheduler! I was wondering if there was a way to tally the employee name by time, to see how many “shifts” each person worked.
http://zarjay.net/ Zarjay

Sorry, it currently doesn't tally names. Although, that's something I can add to the app if people find it useful. ^_^
Linda

I would find it very useful- if my vote counts! :)
Linda

I would find it very useful- if my vote counts! :)
Wul142

hi man i really like your code. also i changed your code a bit tomeet my requirement. However, it didnt work somehow for deleting individual item.

here is my code for scheduler.js

$(function() {

// Initialize some jQuery objects

var

$error = $(‘#error’),

$info = $(‘#info’),

$entry_section = $(‘#add-entry-section’),

$entry_name = $(‘#entry-name’),

$schedule = $(‘#schedule’),

$clone = $(‘#clone’),

$generate = $(‘#generate’);

// Start the setup

init();

// Setup code

function init() {

// Hide Stuff

$error.hide();

$info.hide();

// Make the table cells selectable

$schedule.selectable({

filter: ‘td’

});

// Whenever entries are created, let them be deletable

$(‘.deletable’).live(‘click’, removeEntry);

// Activate buttons

//$(‘#add-entry’).click(openEntrySection);

$(‘#save’).click(addEntries);

$(‘#cancel’).click(closeEntrySection);

$(‘#add-entry-form’).submit(addEntries);

$(‘#add-row’)

.click(addRow)

.hover(addRowHighlight, addRowUndoHighlight);

$(‘#remove-row’)

.click(removeRow)

.hover(removeRowHighlight, removeRowUndoHighlight);

$(‘#remove-entries’)

.click(removeEntries)

.hover(removeEntriesHighlight, removeEntriesUndoHighlight);

$(‘#generate’).click(generateSchedule);

// Prevent text selection on double-click

$(‘.actions a’)

.attr(‘unselectable’,'on’)

.css(‘MozUserSelect’,'none’)

.bind(‘selectstart.ui’, function() {

return false;

});

}

// Add a row to the table

function addRow() {

$schedule.find(‘tbody’).append(”);

addRowUndoHighlight();

addRowHighlight();

return false;

}

// Highlight bottom row of table to cue user of add action

function addRowHighlight() {

$schedule.find(‘tbody tr:last-child *’).addClass(‘adding’);

}

// Undo highlight

function addRowUndoHighlight() {

$schedule.find(‘tbody tr *’).removeClass(‘adding’);

}

// Delete last row from the table

function removeRow() {

$schedule.find(‘tbody tr’).last().remove();

removeRowUndoHighlight();

removeRowHighlight();

return false;

}

// Highlight row to be deleted to cue user of delete action

function removeRowHighlight() {

$schedule.find(‘tbody tr:last-child *’).addClass(‘deleting’);

}

// Undo highlight

function removeRowUndoHighlight() {

$schedule.find(‘tbody tr *’).removeClass(‘deleting’);

}

// Show “add entry” section

function openEntrySection() {

// Prevent entry deletion when section is open

$schedule.find(‘.entry’).removeClass(‘deletable’).removeAttr(‘title’);

// Show section

$entry_section.slideDown(function() {

$entry_name.focus();

});

// Make the table cells selectable

$schedule.selectable({

filter: ‘td’

});

return false;

}

// Hide “add entry” section

function closeEntrySection() {

// Get rid of selectables

$schedule.selectable(‘destroy’);

$(‘.ui-selected’).removeClass(‘ui-selected’);

// Make entries deletable

$schedule.find(‘.entry’).addClass(‘deletable’).attr(‘title’,'Click to delete’);

// Make the table cells selectable

$schedule.selectable({

filter: ‘td’

});

return false;

}

// Add entries to table

function addEntries() {

// Get the input text

var entryValue = “OK”;;

entryValue = $.trim(entryValue);

// Get selected table cells

var $selected = $(‘.ui-selected’);

if (!entryValue) {

$error.message(“”, “You didn’t enter a name.”);

} else if (!$selected.length) {

$error.message(“”, “You didn’t select anything.”);

} else {

// Add entry to each selected cell

var entry = ” + entryValue + ”;

$selected.append(entry);

// Close the section

//closeEntrySection();

$(‘.ui-selected’).removeClass(‘ui-selected’);

$info.message(“”, entryValue + ” has been added.”);

}

return false;

}

// Delete entry from the table

function removeEntry() {

$(this).effect(‘explode’, 500, function() {

$(this).remove();

});

}

// Delete all entries from the table

function removeEntries() {

// Find all entries

var $entries = $schedule.find(‘.entry’);

// Delete them

$entries.fadeOut(function() {

$entries.remove();

});

return false;

}

// Highlight entries to be deleted to cue user of deletion action

function removeEntriesHighlight() {

$(‘.entry’).addClass(‘deleting’);

}

// Undo highlight

function removeEntriesUndoHighlight() {

$(‘.entry’).removeClass(‘deleting’);

}

// Generate a schedule from the table

function generateSchedule() {

// Clone the table

$clone.empty()

$schedule.clone().removeAttr(‘id’).removeClass(‘ui-selectable’).addClass(‘cloned’).appendTo($clone);

// Remove input fields

// Prevent entries from deletion

// Display random entry for each cell

$clone

.find(‘input’).each(function(index) {

var text = $(this).val();

$(this).replaceWith(” + text + ”);

}).end()

.find(‘.deletable’).removeClass(‘deletable’).removeAttr(‘title’).end()

.find(‘.ui-selectee’).removeClass(‘ui-selectee’).end()

.find(‘.ui-selected’).removeClass(‘ui-selected’).end()

.find(‘.cloned tbody td’).randomChild();

return false;

}

});

;(function($) {

/*

* Random Child (0.1)

* by Mike Branski (www.leftrightdesigns.com)

* mikebranski@gmail.com

*

* Copyright (c) 2008 Mike Branski (www.leftrightdesigns.com)

* Licensed under GPL (www.leftrightdesigns.com/library/jquery/randomchild/gpl.txt)

*/

$.fn.randomChild = function(settings) {

return this.each(function(){

var c = $(this).children().length;

var r = Math.ceil(Math.random() * c);

$(this).children().hide().parent().children(‘:nth-child(‘ + r + ‘)’).show();

});

};

// My extensions

$.fn.message = function(strongText, plainText) {

return this.each(function() {

$(this)

.empty().fadeIn()

.html(‘‘ + strongText + ‘ ‘ + plainText + ”)

.delay(2000).fadeOut();

});

};

})(jQuery);
http://www.facebook.com/people/Matthew-Taylor/100001807597905 Matthew Taylor

Any chance we can get this as a WordPress plugin? :)
anash

nice app how do i get the code its not available on the bitbucket link you sent
oscil8

@anash go back a directory i.e. https://bitbucket.org/zarjay and work your way to the source from there
http://zarjay.net/ JR

Sorry, I don’t have any plans to WordPress-ify it :)
http://zarjay.net/ JR

Sorry, I renamed the directory since then. Here’s a newer link:
http://code.zarjay.net/scheduler/src
Electro_caine

Hi….Thanks for this nice tuts….if i needed to display the scheduler in month or year view???
…any idea about how to do that?
http://zarjay.net/ JR

Sorry, my scheduler app doesn’t really support something like that. Although, maybe this jQuery plugin could suit your needs better. :)
Paulo Quicoli

Your Scheduler is great! It fits some of my needs, but I don’t know about others. For example, is there a way to retrieve entries from a database and also, to save all entries to a database? I’m not an javascript expert. Is there events like “ondeleteentry” or “onaddentry”?

Thanks for your great work!
http://zarjay.net/ JR

The code wasn’t designed to store the schedule data or save it to a database, but it could be modified to do so. The code is freely available if you’d like to give it a shot. Otherwise, these jQuery event plugins may suit your needs better.

I may update the scheduler app with some more features eventually, but it’s very low on my priority list right now. Although if you’d like, feel free to make a feature request. Hope that helps!