Welcome to GEPCODE Calendar! This is calendar library for web.

Demo

For now, we provide for jquery library first. Example:

$("yourElement").calendarGC(options)

Our options provided for you to customize the calendar esier. Example

const option = {
  dayNames: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
}

You can use dayNames to replace your day name. We provide day name default like this.

['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

if you want to write it as long name, you can replace that.

Remember You have to write the dayNames from Sunday until Saturday

You can use monthNames to replace your month name. We provide month name default like this.

['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

These will show when the month you picked is on that number of month, so you have to short carefully

Next icon is html that you can use for next button, the default is >

this is html that you can use for prev button, the difault is <

is the callback that will call when the prev button pressed.

Example

const option = {
  onPrevMonth: function(pickedDate){
    console.log(pickedDate)
  }
}

is the callback that will cal when the next button pressed.

Example

const option = {
  onNextMonth: function(pickedDate){
    console.log(pickedDate)
  }
}

is the Integer that you can use for the beginning of date. 0 is Sunday ... 6 is Saturday

this option is an array that you can build any events in spesific date.

Example

const option = {
  events: [
    {
      date: new Date("2022-02-07"),
      eventName: "Holiday",
      className: "badge bg-danger",
      onclick(e, data) {
        console.log(data);
      },
      dateColor: "red"
    }
  ]
}

You can also customize the style with your own css. See the calendar-gc.css when you need your own styling