Home Documentation Examples Donate Source Code

Calendar.js - Example - Basic

This is an example of two basic calendar instances, using slightly different options.

Download Now

v2.12.2 - 13^th Dec 2024

All-Day

12am

12:30am

1am

1:30am

2am

2:30am

3am

3:30am

4am

4:30am

5am

5:30am

6am

6:30am

7am

7:30am

8am

8:30am

9am

9:30am

10am

10:30am

11am

11:30am

12pm

12:30pm

1pm

1:30pm

2pm

2:30pm

3pm

3:30pm

4pm

4:30pm

5pm

5:30pm

6pm

6:30pm

7pm

7:30pm

8pm

8:30pm

9pm

9:30pm

10pm

10:30pm

11pm

11:30pm

All-Day

12am

12:30am

1am

1:30am

2am

2:30am

3am

3:30am

4am

4:30am

5am

5:30am

6am

6:30am

7am

7:30am

8am

8:30am

9am

9:30am

10am

10:30am

11am

11:30am

12pm

12:30pm

1pm

1:30pm

2pm

2:30pm

3pm

3:30pm

4pm

4:30pm

5pm

5:30pm

6pm

6:30pm

7pm

7:30pm

8pm

8:30pm

9pm

9:30pm

10pm

10:30pm

11pm

11:30pm

Mon

Tue

Wed

Thu

Fri

Sat

Sun

24^th

25^th

26^th

27^th

28^th

February

1^st

2^nd

3^rd

4^th

5^th

6^th

7^th

8^th

9^th

10^th

11^th

12^th

13^th

14^th

15^th

16^th

17^th

18^th

19^th

20^th

21^st

22^nd

23^rd

24^th

25^th

26^th

27^th

28^th

29^th

30^th

31^st

1^st

April

April Fools' Day

2^nd

3^rd

4^th

5^th

6^th

All Events

All-Day

00:00

00:30

01:00

01:30

02:00

02:30

03:00

03:30

04:00

04:30

05:00

05:30

06:00

06:30

07:00

07:30

08:00

08:30

09:00

09:30

10:00

10:30

11:00

11:30

12:00

12:30

13:00

13:30

14:00

14:30

15:00

15:30

16:00

16:30

17:00

17:30

18:00

18:30

19:00

19:30

20:00

20:30

21:00

21:30

22:00

22:30

23:00

23:30

All-Day

00:00

00:30

01:00

01:30

02:00

02:30

03:00

03:30

04:00

04:30

05:00

05:30

06:00

06:30

07:00

07:30

08:00

08:30

09:00

09:30

10:00

10:30

11:00

11:30

12:00

12:30

13:00

13:30

14:00

14:30

15:00

15:30

16:00

16:30

17:00

17:30

18:00

18:30

19:00

19:30

20:00

20:30

21:00

21:30

22:00

22:30

23:00

23:30

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

1900

1901

1902

1903

1904

1905

1906

1907

1908

1909

1910

1911

1912

1913

1914

1915

1916

1917

1918

1919

1920

1921

1922

1923

1924

1925

1926

1927

1928

1929

1930

1931

1932

1933

1934

1935

1936

1937

1938

1939

1940

1941

1942

1943

1944

1945

1946

1947

1948

1949

1950

1951

1952

1953

1954

1955

1956

1957

1958

1959

1960

1961

1962

1963

1964

1965

1966

1967

1968

1969

1970

1971

1972

1973

1974

1975

1976

1977

1978

1979

1980

1981

1982

1983

1984

1985

1986

1987

1988

1989

1990

1991

1992

1993

1994

1995

1996

1997

1998

1999

2000

2001

2002

2003

2004

2005

2006

2007

2008

2009

2010

2011

2012

2013

2014

2015

2016

2017

2018

2019

2020

2021

2022

2023

2024

2025

2026

2027

2028

2029

2030

2031

2032

2033

2034

2035

2036

2037

2038

2039

2040

2041

2042

2043

2044

2045

2046

2047

2048

2049

2050

2051

2052

2053

2054

2055

2056

2057

2058

2059

2060

2061

2062

2063

2064

2065

2066

2067

2068

2069

2070

2071

2072

2073

2074

2075

2076

2077

2078

2079

2080

2081

2082

2083

2084

2085

2086

2087

2088

2089

2090

2091

2092

2093

2094

2095

2096

2097

2098

2099

Mon

Tue

Wed

Thu

Fri

Sat

Sun

24^th

25^th

26^th

27^th

28^th

February

1^st

2^nd

3^rd

4^th

5^th

6^th

7^th

8^th

9^th

10^th

11^th

12^th

13^th

14^th

15^th

16^th

17^th

18^th

19^th

20^th

21^st

22^nd

23^rd

24^th

25^th

26^th

27^th

28^th

29^th

30^th

31^st

1^st

April

April Fools' Day

2^nd

3^rd

4^th

5^th

6^th

All Events

1

2

3

4

5

6

7

8

JAVASCRIPT

var calendarInstance1 = new calendarJs( "calendar1", {

exportEventsEnabled: true,

useAmPmForTimeDisplays: true

} );

var calendarInstance2 = new calendarJs( "calendar2", {

exportEventsEnabled: false

} );

Select Colors

Background Color:

Text Color:

Border Color:

Remove All Events In Series

Configuration

Display

Organizer

Enable auto-refresh for events

Enable browser notifications

Enable tooltips

Enable drag & drop for events

Show holidays in the main display and title bars

Jump To Date

Select Colors

Background Color:

Text Color:

Border Color:

Remove All Events In Series

Configuration

Display

Organizer

Enable auto-refresh for events

Enable browser notifications

Enable tooltips

Enable drag & drop for events

Show holidays in the main display and title bars

Jump To Date