Uncategorized

Wijmo Wednesday: Sneak peek at the v2 Event Calendar

In this week’s Wijmo Wednesday, I’d like to introduce you to the new Event Calendar.

If you’re an iPad user, you might notice some similarities. In fact, the Wijmo team specifically designed this widget to work like calendar application on the iPad.

The screenshot above shows the default view. All of this is customizable depending on the needs of your application. Here are previews of the others views available:

Some cool things to note about the event calendar. Here is a preview of experience of adding an event to the calendar:

And here is what the final event looks like when it’s added.

What does it look like to pull events from the calendar through JavaScript? This example pulls the complete event (appointment) list, and shows an alert for them.

Of course this is only one way to get the event data. You can also subscribe to event save events that will give you the same information on a per event status.

Last thing to note about the Event Calendar is that utilizes HTML5 local storage to store all the appointment information on your local machine. This means that during development of the above example, I didn’t have to keep re-entering the data. If I go into Chrome developer tools, you can see the appointment data in the explorer.

There you go! A sneak peek at the Wijmo v2 Event Calendar. I encourage you to go download the v2 BETA and try it out for yourself.

Wijmo Wednesday: Sneak peek at the v2 Editor

Let’s start with a picture.

Boring, eh? Now I’m going to add a little bit of Wijmo love:

Render again, and here’s what we got!

Holy crap! What did Wijmo do to our simple <textarea>? It made it awesome! Our simple <textarea> is now a full blown HTML rich text editor. Check out the ribbon view in the screenshot above. We have lots of familiar commands: undo, redo, cut, copy, paste, preview, and remove formatting. Next to that are other common word processor commands: font name, font size, bold, italics, underline, and strikeout. The list goes on and on.

We give you full control over how the look and feel of the control. For example, let’s say you don’t want all the ribbon stuff. Change the method call like this:

The new end result is a simple text editor.

Your next question might be: “Kevin, what does the output of this text editor look like, and how to I get it?”

That’s an excellent question. How would you pull the value of a textarea without Wijmo? If you’re a jQuery user (and I’m assuming you are if you’re using Wijmo), you would use the .val() method. Using a Wijmo Editor is no different.

What does the output look like? If I wire up the full example by adding a button to the page, and assigning a click event (the screenshot above), I get the following output:

It’s all HTML in the end! Take this output and do whatever you need with it.

This is just scratching the surface of what is possible with the Wijmo editor, so I encourage you to go download the v2 BETA and try it out for yourself.

Kevin Griffin
keving@componentone.com

Follow me on Twitter