jQuery Event Calendar Demo Page

jQuery plugin to show events in a calendar in a very confortable way Main features: Fluid Calendar: calendar will be shown with the width of its parent. Size is recalculated on window resize. So you can use it in your responsive designs Change Style as you like : You can edit the .css file to restyle Light: Less than 8kb of Javascript(minified) jQuery rules!: It uses all the power of jQuery, but you can also use it with frameworks like Zepto.js Highly customizable : You can change almost everything. Look at the following examples

Human Date Format

Most of you don't like timestamp date format, so now you can use another formats

November 2013
mon tue wed thu fri

1 4 11 18 25 5 12 19 26 6 13 20 27 7 14 21 28 8 15 22 29

November 22nd events:

loading...

$ ( i d ) . e v e n t C a l e n d a r ( { e v e n t s j s o n :' f i l e . j s o n ' , j s o n D a t e F o r m a t :' h u m a n ' } ) ;

Default Demo

No cache

inline json

Example of jQuery Events Calendar with default parameters

The plugin only calls once to the json file, so it has to contain all events. After that call, the plugin will filter the results

The json is written directly inside the plugin function via javaScript (no ajax call to get the events).

September 2013 September 2013

mon tue wed thu fri mon tue

September 2013
mon wed thu fri tue wed thu fri

2 9 16 23 30

3 10 17 24

4 11 18 25

5 12 19 26

6 13 20 27 2 2 9 16 23 30 3 10 17 24 4 11 18 25 5 12 19 26 6 13 20 27 9 16 23 30 3 10 17 24 4 11 18 25 5 12 19 26 6 13 20 27

Next events:
25/9/2013 21:30

Test Project 15 Brainstorming

25/9/2013 23:30

Next events:
25/9/2013 21:30

September 25th events:

There are no events in this perio

Project 15 meeting
26/9/2013 0:00

Test Project 15 Brainstorming

25/9/2013 23:30

Project 15 meeting
26/9/2013 0:30

Project 15 meeting
26/9/2013 0:00

Project 15 demo

Project 15 meeting
26/9/2013 0:30

v a re v e n t s I n l i n e=[ {j s o n} ] ; $ ( i d ) . e v e n t C a l e n d a r ( { j s o n D a t a :e v e n t s I n l i n e } ) ;

Project 15 demo $ ( i d ) . e v e n t C a l e n d a r ( { / /l i n kt oe v e n t sj s o n e v e n t s j s o n :' f i l e . j s o n ' } ) ;

$ ( i d ) . e v e n t C a l e n d a r ( { e v e n t s j s o n :' f i l e . j s o n ' , c a c h e J s o n :f a l s e } ) ;

Localization
We have total control about the language of the plugin

Limit Results
It is possible to limit the number of events to show. But if we click on a day, results will not be filtered

Start week on Sunday

Also you can customize the day when the week starts

Septiembre 2013 September 2013

lun mar mie jue vie mon tue wed thu fri sun mon

September 2013
tue wed thu

1 8

2 9 16 23 30

3 10 17 24

4 11 18 25

5 12 19 26

2 9 16 23 30

3 10 17 24

4 11 18 25

5 12 19 26

6 13 20 27 2 9 16 23 3 10 17 24 4 11 18 25 5 12 19 26 6 13 20 27

15 22 29

Next events:

Septiembre 17th eventos:

17/9/2013 21:30

30

25/9/2013 21:30

Test Project 15 Brainstorming

25/9/2013 23:30

Test Project 7 Brainstorming

17/9/2013 23:30

error getting json: json/events.json.php Project 15 meeting

26/9/2013 0:00

Project 7 meeting

Project 15 meeting
26/9/2013 0:30

$ ( i d ) . e v e n t C a l e n d a r ( { Project 15 demo e v e n t s j s o n :' f i l e . j s o n ' , $ ( i d ) . e v e n t C a l e n d a r ( { e v e n t s L i m i t :2 e v e n t s j s o n :' f i l e . j s o n ' , } ) ; m o n t h N a m e s :[" E n e r o " ," F e b r e r o " ," M a r z o " ," A b r i l " ," M a y o " ," J u n i o " , $ ( i d ) . e v e n t C a l e n d a r ( { " J u l i o " ," A g o s t o " ," S e p t i e m b r e " ," O c t u b r e " ," N o v i e m b r e " ," D i c i e m b r e "] , e v e n t s j s o n :' f i l e . j s o n ' , d a y N a m e s :[' D o m i n g o ' , ' L u n e s ' , ' M a r t e s ' , ' M i r c o l e s ' , s t a r t W e e k O n M o n d a y :f a l s e ' J u e v e s ' , ' V i e r n e s ' , ' S a b a d o '] , } ) ; d a y N a m e s S h o r t :[' D o m ' , ' L u n ' , ' M a r ' , ' M i e ' ,' J u e ' , ' V i e ' , ' S a b '] , t x t _ n o E v e n t s :" N oh a ye v e n t o sp a r ae s t ep e r i o d o " , t x t _ S p e c i f i c E v e n t s _ p r e v :" " , t x t _ S p e c i f i c E v e n t s _ a f t e r :" e v e n t o s : " , t x t _ n e x t :" s i g u i e n t e " , t x t _ p r e v :" a n t e r i o r " , t x t _ N e x t E v e n t s :" P r x i m o se v e n t o s : " , t x t _ G o T o E v e n t U r l :" I ra le v e n t o " , } ) ;

Calendar display
You can show all the days in a single line to make calendar widget smaller

Hide week days

Hide the day names in the calendar view

September 2013
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

September 2013

Next events:
25/9/2013 21:30

2 9 16 23

3 10 17 24

4 11 18 25

5 12 19 26

6 13 20 27

Test Project 15 Brainstorming

25/9/2013 23:30

Project 15 meeting
26/9/2013 0:00

Project 15 meeting
26/9/2013 0:30

30

Project 15 demo

Next events:
25/9/2013 21:30

Test Project 15 Brainstorming $ ( i d ) . e v e n t C a l e n d a r ( { e v e n t s j s o n :' f i l e . j s o n ' , s h o w D a y A s W e e k s :f a l s e } ) ;

25/9/2013 23:30

Project 15 meeting
26/9/2013 0:00

Project 15 meeting
26/9/2013 0:30

Project 15 demo

$ ( i d ) . e v e n t C a l e n d a r ( { e v e n t s j s o n :' f i l e . j s o n ' , s h o w D a y N a m e I n C a l e n d a r :f a l s e } ) ;

Show Events description

Events description is hide by default (you can show it clicking on the event title), but if you want they can be always visible.

Show all descriptions

By default, the plugin only shows the event that you select, but you can open all the descriptions in which you click on

Animation Speed
Also you can customize the speed and the opacity of the widget animation

September 2013 September 2013

mon mon tue wed thu fri tue wed thu fri

September 2013
mon tue wed thu fri

2 2 3 10 17 24 4 11 18 25 5 12 19 26 6 13 20 27 9 16 23 30

3 10 17 24

4 11 18 25

5 12 19 26

6 13 20 27

2 9 16 23 30

3 10 17 24

4 11 18 25

5 12 19 26

6 13 20 27

9 16 23 30

Next events:
25/9/2013 21:30

Next events:
25/9/2013 21:30

Next events:
25/9/2013 21:30

Test Project 15 Brainstorming

25/9/2013 23:30

Test Project 15 Brainstorming

25/9/2013 23:30

Test Project 15 Brainstorming

Lorem Ipsum dolor set 25/9/2013 23:30

Project 15 meeting
26/9/2013 0:00

Project 15 meeting
26/9/2013 0:00

Project 15 meeting
Lorem Ipsum dolor set 26/9/2013 0:00

Project 15 meeting
26/9/2013 0:30

Project 15 meeting
26/9/2013 0:30

Project 15 demo

Project 15 meeting
Lorem Ipsum dolor set

Project 15 demo $ ( i d ) . e v e n t C a l e n d a r ( { e v e n t s j s o n :' f i l e . j s o n ' , m o v e S p e e d :2 0 0 0 , m o v e O p a c i t y :1 } ) ;

$ ( i d ) . e v e n t C a l e n d a r ( { Project 15 demo e v e n t s j s o n :' f i l e . j s o n ' , Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed o n l y O n e D e s c r i p t i o n :f a l s e do eiusmod tempor incididunt ut labore et dolore magna } ) ; aliqua. Ut enim ad minim veniam, quis nostrud exercitation
26/9/2013 0:30 ullamco laboris nisi ut aliquip ex ea commodo consequat.

$ ( i d ) . e v e n t C a l e n d a r ( { e v e n t s j s o n :' f i l e . j s o n ' , s h o w D e s c r i p t i o n :t r u e } ) ;

Events Scrollable
It is possible to add a Scroll panel for the events list to avoid panel resize on date changes

Open links in new window

You can open event links in a new window

September 2013 September 2013

mon mon tue wed thu fri tue wed thu fri

2 2 9 16 23 30 3 10 17 24 4 11 18 25 5 12 19 26 6 13 20 27 9 16 23 30

3 10 17 24

4 11 18 25

5 12 19 26

6 13 20 27

Next events:
25/9/2013 21:30

Next events:
25/9/2013 21:30

Test Project 15 Brainstorming

Lorem Ipsum dolor set 25/9/2013 23:30

Test Project 15 Brainstorming

25/9/2013 23:30

Project 15 meeting
26/9/2013 0:00

Project 15 meeting
Lorem Ipsum dolor set 26/9/2013 0:00

$ ( i d ) . e v e n t C a l e n d a r ( { e v e n t s j s o n :' f i l e . j s o n ' , e v e n t s S c r o l l a b l e :t r u e } ) ;

Project 15 meeting
Lorem Ipsum dolor set 26/9/2013 0:30

Project 15 demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor i labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati laboris nisi ut aliquip ex ea commodo consequat.

$ ( i d ) . e v e n t C a l e n d a r ( { e v e n t s j s o n :' f i l e . j s o n ' , o p e n E v e n t I n N e w W i n d o w :t r u e , s h o w D e s c r i p t i o n :t r u e/ /a l s oi tc a nb ef a l s e } ) ;

Paradigma Tecnolgico @paradigmate

Jaime Fernndez @vissit

Special thanks to: Nerea Navarro @nereaestonta - Translation & Testing

jQuery Event Calendar Plugin by Jaime Fernandez, Paradigma Tecnolgico is licensed under a Creative Commons

Juan Francisco del Ro @juanriopacheco Javascript Knowledge Nuria Martin @nmartins - Design Luis Calvo @LuisCalvoDiaz - Testing David Montalvo @davidmontalvo - Testing

Reconocimiento-CompartirIgual 3.0 Unported License.