dyCalendarJS

This is a JavaScript library to create Calendar. You can use it in your blog and website.

Created by: Yusuf Shakeel

Click here to watch the tutorial video.

Click here for the documentation.

License

It's free and released under MIT License Copyright (c) 2016 Yusuf Shakeel

Getting Started

Include the JavaScript and Stylesheet file in your page.

Create a div and give it an id like #sample-calendar and the .dycalendar-container class.

Call the draw() method of dyCalendarJS to draw the calendar.

<!DOCTYPE html>
<html>
  <head>
    <title>dyCalendarJS</title>
    <link href="path/to/dycalendar.min.css" rel="stylesheet">
  </head>
  <body>

    <div id="sample-calendar" class="dycalendar-container">
    </div>

    <!-- javascript -->
    <script src="path/to/dycalendar.min.js"></script>
    <script>
    dycalendar.draw({
      target: '#sample-calendar'
    });
    </script>

  </body>
</html>

Demo

Today calendar (default skin)


Month calendar (default skin)


Day calendar (default skin)

Today calendar (skin-blue)

Today calendar (skin-black shadow-default)


Month calendar (default current month) (skin-red)

Month calendar (21st October 1990) (skin-green shadow-default)


Month Calendar 1 target class = "dycalendar-month"

Month Calendar 2 target class = "dycalendar-month"


Month Calendar with prev-next-button id = "dycalendar-month-prev-next-button"

Month Calendar with prev-next-button class = "dycalendar-month-prev-next-button"

Month Calendar with prev-next-button class = "dycalendar-month-prev-next-button"


Month calendar (default current month) (round-edge)

Month calendar (default current month) (round-edge shadow-default)

Month calendar (default current month) (round-edge shadow-black)

Month calendar (default current month) (round-edge shadow-blue)

Month calendar (default current month) (round-edge shadow-green)

Month calendar (default current month) (round-edge shadow-purple)

Month calendar (default current month) (round-edge shadow-red)

Month calendar (default current month) (round-edge shadow-spacegray)


Month calendar (default current month) (round-edge default skin gradient)

Month calendar (default current month) (round-edge skin-black gradient)

Month calendar (default current month) (round-edge skin-blue gradient)

Month calendar (default current month) (round-edge skin-green gradient)

Month calendar (default current month) (round-edge skin-purple gradient)

Month calendar (default current month) (round-edge skin-red gradient)

Month calendar (default current month) (round-edge skin-spacegray gradient)

Donate

Feeling generous ♥ Buy me a cup of tea

Donate via PayPal


Copyright © Yusuf Shakeel

MIT License