Event Calendar

event-calendar.markdown

Event Calendar

A Pen by Norhan_ms on CodePen.

License.

index.pug

.hero
  #calendar

script.js

// Initialize evo-calendar in your script file or an inline <script> tag
$(document).ready(function() {
    $('#calendar').evoCalendar({
        settingName: "hello"
    })
 calendarEvents:[
   {
     id:'mmnnn',
     name:'new year',
     date:'January/1/2020',
     type:'holiday',
     everyYear:true
   
 },
  {
     id:'0908',
     name:'new year',
     date:'January/1/2020',
     type:'holiday',
     everyYear:true
   
 }
                ]
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/evo-calendar/js/evo-calendar.min.js"></script>

style.scss

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
body{
}
.hero{
  width:100%;
  height:100%;
  background:linear-gradient(45deg,#83B8D7,#BAA6FD);
display:grid;

}
#calendar{
  width:90%;
  margin:40px auto;
}

styles

<link href="https://cdn.jsdelivr.net/npm/[email protected]/evo-calendar/css/evo-calendar.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/evo-calendar/css/evo-calendar.midnight-blue.min.css" rel="stylesheet" />