24+ JavaScript Calendar Design Code Examples – csshint

1. Calendar

Author

B8bop

Made with

HTML / CSS / JS

demo and code Get Hosting

2. Calendar Flip Animation

Author

Gabriel Colombo

Made with

HTML / CSS / JS

demo and code Get Hosting

3. Calendar

Author

Sam Markiewicz

Made with

HTML / CSS (Sass) / JS

demo and code Get Hosting

4. Date and Time Picker

Author

Jarom Vogel

Made with

HTML / CSS (SCSS) / JS

demo and code Get Hosting

5. Flex Calendar

Author

Russian Rebouças

Made with

HTML / CSS / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/andreas_pihl/pen/gmoJGE'>Parallax flipping calendar </a> by Andreas Pihl Jrgensen (<a href='https://codepen.io/andreas_pihl'>@andreas_pihl</a>) on <a href='https://codepen.io'>CodePen</a>.

6. Parallax flipping calendar

Author

Andreas Pihl Jrgensen

Made with

HTML / CSS / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/MaCeLMp4/pen/sjgEI'>Flexible Calendar </a> by MaCeLMp4 (<a href='https://codepen.io/MaCeLMp4'>@MaCeLMp4</a>) on <a href='https://codepen.io'>CodePen</a>.

7. Flexible Calendar

Author

MaCeLMp4

Made with

HTML / CSS / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/internette/pen/YqJEjY'>Dribbble Recreation: Calendar Widget II</a> by Antoinette Janus (<a href='https://codepen.io/internette'>@internette</a>) on <a href='https://codepen.io'>CodePen</a>.

8. Calendar Widget II

Author

Antoinette Janus

Made with

HTML / CSS (SCSS) / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/ovdojoey/pen/GqRxYQ'>Calendar App</a> by Joey Lea (<a href='https://codepen.io/ovdojoey'>@ovdojoey</a>) on <a href='https://codepen.io'>CodePen</a>.

9. Calendar App

Author

Joey Lea

Made with

HTML / CSS / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/boudra/pen/raErwP'>Minimalist calendar</a> by Mohamed Boudra (<a href='https://codepen.io/boudra'>@boudra</a>) on <a href='https://codepen.io'>CodePen</a>.

10. Minimalist calendar

Author

Mohamed Boudra

Made with

HTML / CSS / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/boudra/pen/raErwP'>Minimalist calendar</a> by Mohamed Boudra (<a href='https://codepen.io/boudra'>@boudra</a>) on <a href='https://codepen.io'>CodePen</a>.

11. Minimalist calendar

Author

Mohamed Boudra

Made with

HTML / CSS / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/yumeeeei/pen/KqZOEB'>Duotone calendar </a> by yumeeeei (<a href='https://codepen.io/yumeeeei'>@yumeeeei</a>) on <a href='https://codepen.io'>CodePen</a>.

12. Duotone calendar

Author

yumeeeei

Made with

HTML / CSS (Stylus) / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/dark_mefody/pen/VpdrGG'>#DailyCssImages – Day 9. Calendar</a> by Nikita Dubko (<a href='https://codepen.io/dark_mefody'>@dark_mefody</a>) on <a href='https://codepen.io'>CodePen</a>.

13. Calendar

Author

Nikita Dubko

Made with

HTML (pug) / CSS (SCSS) / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/Jackthomsonn/pen/pyjXdJ'>It’s A Calendar Sort Of Thing</a> by Jack Thomson (<a href='https://codepen.io/Jackthomsonn'>@Jackthomsonn</a>) on <a href='https://codepen.io'>CodePen</a>.

14. It’s A Calendar Sort Of Thing

Author

Jack Thomson

Made with

HTML (Haml) / CSS (SCSS) / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/mattjuggins/pen/WGRRYx'>Circular Calendar Display</a> by Matthew Juggins (<a href='https://codepen.io/mattjuggins'>@mattjuggins</a>) on <a href='https://codepen.io'>CodePen</a>.

15. Circular Calendar Display

Author

Matthew Juggins

Made with

HTML (Haml) / CSS (SCSS) / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/RobVermeer/pen/zBgdwg'>React date range picker</a> by Rob Vermeer (<a href='https://codepen.io/RobVermeer'>@RobVermeer</a>) on <a href='https://codepen.io'>CodePen</a>.

16. React date range picker

Author

Rob Vermeer

Made with

HTML (pug) / CSS (SCSS) / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/peanav/pen/ulkof'>Event Calendar Widget</a> by Paul Navasard (<a href='https://codepen.io/peanav'>@peanav</a>) on <a href='https://codepen.io'>CodePen</a>.

17. Event Calendar Widget

Author

Paul Navasard

Made with

HTML / CSS / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/havardob/pen/WwWooB'>Daily UI #13 | jQuery Datepicker summer vibe</a> by Håvard Brynjulfsen (<a href='https://codepen.io/havardob'>@havardob</a>) on <a href='https://codepen.io'>CodePen</a>.

18. jQuery Datepicker summer

Author

Håvard Brynjulfsen

Made with

HTML / CSS (SCSS) / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/RicardoBarbosa/pen/kXzRbw'>Calendar in ReactJs</a> by Ricardo Barbosa (<a href='https://codepen.io/RicardoBarbosa'>@RicardoBarbosa</a>) on <a href='https://codepen.io'>CodePen</a>.

19. Calendar in ReactJs

Author

Ricardo Barbosa

Made with

HTML / CSS / JS (Babel)

demo and code Get Hosting

See the Pen <a href='https://codepen.io/tadaima/pen/WGRXyA'>Infinite Calendar</a> by Tadaima (<a href='https://codepen.io/tadaima'>@tadaima</a>) on <a href='https://codepen.io'>CodePen</a>.

20. Infinite Calendar

Author

Tadaima

Made with

HTML (PUG) / CSS (SCSS) / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/internette/pen/vZKLyX'>Fluent Design: Calendar</a> by Antoinette Janus (<a href='https://codepen.io/internette'>@internette</a>) on <a href='https://codepen.io'>CodePen</a>.

21. Fluent Design: Calendar

Author

Antoinette Janus

Made with

HTML (PUG) / CSS (SCSS) / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/lanc/pen/KEqws'>fullCalendar with custom agenda view</a> by Lanc (<a href='https://codepen.io/lanc'>@lanc</a>) on <a href='https://codepen.io'>CodePen</a>.

22. fullCalendar with custom agenda view

Author

Lanc

Made with

HTML / CSS / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/nizarmah/pen/LkjjWV'>Calendar Javascript Library</a> by Nizar (<a href='https://codepen.io/nizarmah'>@nizarmah</a>) on <a href='https://codepen.io'>CodePen</a>.

23. Calendar Javascript Library

Author

Nizar

Made with

HTML / CSS / JS

demo and code Get Hosting

See the Pen <a href='https://codepen.io/maggiben/pen/OPmLBW'>Calendar</a> by Benjamin (<a href='https://codepen.io/maggiben'>@maggiben</a>) on <a href='https://codepen.io'>CodePen</a>.

24. Calendar

Author

Benjamin

Made with

HTML / CSS (Less) / JS

demo and code Get Hosting

1. Calendar

Author

Made with

2. Calendar Flip Animation

Author

Made with

3. Calendar

Author

Made with

4. Date and Time Picker

Author

Made with

5. Flex Calendar

Author

Made with

6. Parallax flipping calendar

Author

Made with

7. Flexible Calendar

Author

Made with

8. Calendar Widget II

Author

Made with

9. Calendar App

Author

Made with

10. Minimalist calendar

Author

Made with

11. Minimalist calendar

Author

Made with

12. Duotone calendar

Author

Made with

13. Calendar

Author

Made with

14. It’s A Calendar Sort Of Thing

Author

Made with

15. Circular Calendar Display

Author

Made with

16. React date range picker

Author

Made with

17. Event Calendar Widget

Author

Made with

18. jQuery Datepicker summer

Author

Made with

19. Calendar in ReactJs

Author

Made with

20. Infinite Calendar

Author

Made with

21. Fluent Design: Calendar

Author

Made with

22. fullCalendar with custom agenda view

Author

Made with

23. Calendar Javascript Library

Author

Made with

24. Calendar

Author

Made with

You may also like