Home - meshesha/jCal GitHub Wiki

Welcome to the jCal.js wiki!

#Basic Usage In the HEAD of your HTML, include the necessary files:

##css if you wish to use jquery-ui theme, you need to add jquery-ui css file. you can download it from jquery-ui site and save it in "css" folder and then add it by:

<link rel="stylesheet" href="css/jquery-ui.css">

or you can add it by CDN server like:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

##js <script type="text/javascript" src="js/jcal.js"></script> also you need to include jquery js file. you can download it from jquery site and save it in "js" folder and add it:

<script type="text/javascript" src="js/jquery.js"></script>

or you can add it from CDN server like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

if you wish to use jquery-ui theme, you also need to add jquery-ui js file. you can download it from above jquery-ui site and save it in "js" folder and then add it by:

<script type="text/javascript" src="js/jquery-ui.js"></script>

or you can add it from CDN server like:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

##html body In html body you nead to add div tag and javascript code ##div

<div class="jcal" id="my_calendar_greg_en"></div>

you can choose any id name for the div tag. ##javascript Example:

<script type="text/javascript">
$(window).load( function() {
    $('#my_calendar_greg_en').jcal({
        cal:'gre',
        lang: 'en',
        url: 'events_greg_en.json',
        dataType: 'json',
        jQueryui: true,
        timeFormat: '24h'
    });
});
</script>

##Summary ...

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> 
   <script type="text/javascript" src="js/jcal.js"></script> <!--must-->
   <link rel="stylesheet" href="css/jcal.css"> <!--must-->

   ...
 </head>
</body>
   ...
   <div class="jcal" id="my_calendar_greg_en"></div>
   ...
   <script type="text/javascript">
     $(window).load( function() {
        $('#my_calendar_greg_en').jcal({
           cal:'gre',
           lang: 'en',
           url: 'events_greg_en.json',
           dataType: 'json',
           jQueryui: true,
           timeFormat: '24h'
        });
     });
  </script>
  ...
 </body>
 </html>

for more option, go to All options.

⚠️ **GitHub.com Fallback** ⚠️