index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<meta property="og:url" content="http://www.pigno.se/barn/PIGNOSE-Calendar">
<meta property="og:type" content="product"/>
<meta property="og:title" content="PIGNOSE Calendar"/>
<meta property="og:description" content="PIGNOSE Calendar is beautiful and eidetic jQuery date picker plugin"/>
<meta property="og:image" content="http://www.pigno.se/barn/PIGNOSE-Calendar/demo/img/cover@250.png"/>
<meta property="og:site_name" content="PIGNOSE"/>
<title>PIGNOSE Calendar</title>
<meta name="description" content="PIGNOSE Calendar is beautiful and eidetic jQuery date picker plugin"/>
<link rel="shortcut icon" type="image/x-icon" href="demo/img/pignose-ico.ico"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/icon.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/style.css"/>
<link rel="stylesheet" type="text/css" href="demo/css/ui.css"/>
<link rel="stylesheet" type="text/css" href="dist/css/pignose.calendar.min.css"/>
</head>
<body>
<div id="wrapper">
<div class="header">
<img src="demo/img/pignose-logo.png" alt=""/>
<h1>PIGNOSE Calendar</h1>
<a href="https://github.com/KennethanCeyer/pg-calendar" target="_blank" class="ui button black">View
project on Github</a>
<a href="https://github.com/KennethanCeyer/pg-calendar/wiki/Documentation" target="_blank"
class="ui button blue">Documentation</a>
<a href="https://github.com/KennethanCeyer/pg-calendar/archive/master.zip" target="_blank"
class="ui button teal">Download</a>
<h4 class="version">Latest version <strong></strong></h4>
</div>
<div id="basic" class="article">
<div class="title">
<h3><span>📅 Calendar</span></h3>
<h4>PIGNOSE Calendar is beautiful and eidetic jQuery date picker plguin</h4>
</div>
<div class="calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-basic">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-basic">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-basic">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-basic">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar();
});</code></pre>
</div>
</div>
<div id="input" class="article">
<div class="title">
<h3><span>Input type</span></h3>
<h4>You can use calendar by input power ups</h4>
</div>
<input type="text" class="input-calendar"/>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-input">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-input">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-input">
<pre><code class="language-markup"><input type="text" id="text-calendar" class="calendar" /></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-input">
<pre><code class="language-js">$(function() {
$('input.calendar').pignoseCalendar({
format: 'YYYY-MM-DD' // date format <span class="ui label"><i class="fas fa-code"></i>string</span>. (2017-02-02)
});
});</code></pre>
</div>
</div>
<div id="modal" class="article">
<div class="title">
<h3><span>Modal</span></h3>
<h4>You can display calendar by modal popup</h4>
</div>
<a href="#" class="btn-calendar">Open Modal</a>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-modal">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-modal">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-modal">
<pre><code class="language-markup"><a href="#" class="calendar"></a></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-modal">
<pre><code class="language-js">$(function() {
$('a.calendar').pignoseCalendar({
format: 'YYYY-MM-DD' // date format <span class="ui label"><i class="fas fa-code"></i>string</span>. (2017-02-02)
});
});</code></pre>
</div>
</div>
<div id="theme-dark" class="article">
<div class="title">
<h3><span>Dark theme support</span></h3>
<h4>Dark theme type supports, And we have a plan to add other themes</h4>
</div>
<div class="calendar-dark"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-dark-theme">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-dark-theme">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-dark-theme">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-dark-theme">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
theme: 'dark' // light, dark, blue
});
});</code></pre>
</div>
</div>
<div id="theme-blue" class="article">
<div class="title">
<h3><span>Blue theme support</span></h3>
</div>
<div class="calendar-blue"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-blue-theme">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-blue-theme">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-blue-theme">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-blue-theme">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
theme: 'blue' // light, dark, blue
});
});</code></pre>
</div>
</div>
<div id="schedules" class="article">
<div class="title">
<h3><span>Schedule Calendar</span></h3>
</div>
<div class="calendar-schedules"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-schedules">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-schedules">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-schedules">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-schedules">
<pre><code class="language-js">$('.calendar').pignoseCalendar({
scheduleOptions: {
colors: {
offer: '#2fabb7',
ad: '#5c6270'
}
},
schedules: [{
name: 'offer',
date: '2017-02-08'
}, {
name: 'ad',
date: '2017-02-08'
}, {
name: 'offer',
date: '2017-02-05',
}],
select: function(date, context) {
console.log('events for this date', context.storage.schedules);
}
});</code></pre>
</div>
</div>
<div id="multiple" class="article">
<div class="title">
<h3><span>Multiple range Calendar</span></h3>
<h4>PIGNOSE Calendar supports multiple range picker</h4>
</div>
<div class="multi-select-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-multiple">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-multiple">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-multiple">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-multiple">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
multiple: true
});
});</code></pre>
</div>
</div>
<div id="toggle" class="article">
<div class="title">
<h3><span>Toggle Calendar</span></h3>
<h4>You can toggle date and get those dates as array</h4>
</div>
<div class="toggle-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-toggle">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-toggle">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-toggle">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-toggle">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
toggle: true,
select: function(dates, context) {
console.log('toggle active dates', context.storage.activeDates);
}
});
});</code></pre>
</div>
</div>
<div id="disabled" class="article">
<div class="title">
<h3><span>Disabled Dates Calendar</span></h3>
<h4>You can turn off the specific dates</h4>
</div>
<div class="guide">
<h5>You turned off dates below [random]</h5>
<div class="guide-dates"></div>
</div>
<div class="disabled-dates-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-disabled">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-disabled">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-disabled">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-disabled">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
disabledDates: [
'2017-01-01',
'2017-06-01',
'2017-06-02'
]
});
});</code></pre>
</div>
</div>
<div id="disabled-weekdays" class="article">
<div class="title">
<h3><span>Disabled Weekdays Calendar</span></h3>
<h4>You can disable dates by specific weekday numbers (0 ~ 6, 0 is sunday)</h4>
</div>
<div class="disabled-weekdays-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-disabled-weekdays">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-disabled-weekdays">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-disabled-weekdays">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-disabled-weekdays">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
disabledWeekdays: [0, 6] // SUN (0), SAT (6)
});
});</code></pre>
</div>
</div>
<div id="disabled-range" class="article">
<div class="title">
<h3><span>Disabled Range Calendar</span></h3>
<h4>You can give disabled range(minimum, maximum) by date <span class="ui label"><i class="fas fa-code"></i>string</span>(YYYY-MM-DD)</h4>
</div>
<div class="disabled-range-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-disabled-range">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-disabled-range">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-disabled-range">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-disabled-range">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
minDate: '2017-04-01',
maxDate: '2017-06-24'
});
});</code></pre>
</div>
</div>
<div id="disabled-multiple-range" class="article">
<div class="title">
<h3><span>Disabled Multiple Ranges Calendar</span></h3>
<h4><strong>Advanced</strong> - You can give multiple disabled date ranges by <span class="ui label"><i class="fas fa-code"></i>string</span>(YYYY-MM-DD)</h4>
</div>
<div class="disabled-ranges-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-disabled-multiple-range">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-disabled-multiple-range">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-disabled-multiple-range">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-disabled-multiple-range">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
disabledRanges: [
['2016-10-05', '2016-10-21'],
['2016-11-01', '2016-11-07'],
['2016-11-19', '2016-11-21'],
['2016-12-05', '2016-12-08'],
['2016-12-17', '2016-12-18'],
['2016-12-29', '2016-12-30'],
['2017-01-10', '2017-01-20'],
['2017-02-10', '2017-04-11'],
['2017-07-04', '2017-07-09'],
['2017-12-01', '2017-12-25'],
['2018-02-10', '2018-02-26'],
['2018-05-10', '2018-09-17'],
]
});
});</code></pre>
</div>
</div>
<div id="pick-weeks" class="article">
<div class="title">
<h3><span>Multiple Weeks Calendar</span></h3>
<h4><strong>Advanced</strong> - You can turn on/off weeks date range by clicking</h4>
</div>
<div class="pick-weeks-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-pick-weeks">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-pick-weeks">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-pick-weeks">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-pick-weeks">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
pickWeeks: true,
multiple: true,
});
});</code></pre>
</div>
</div>
<div id="i18n" class="article">
<div class="title">
<h3><span>🌍 I18N Support</span></h3>
<h4>PIGNOSE Calendar supports various languages.</h4>
</div>
<div class="group">
<h5>Korean</h5>
<div class="language-calendar language-ko-calendar" data-lang="ko"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-ko">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-ko">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-ko">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-ko">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'ko'
});
});</code></pre>
</div>
</div>
<div class="group">
<h5>Deutsch</h5>
<div class="language-calendar language-de-calendar" data-lang="de"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-de">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-de">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-de">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-de">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'de'
});
});</code></pre>
</div>
</div>
<div class="group">
<h5>Chinese</h5>
<div class="language-calendar language-ch-calendar" data-lang="ch"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-ch">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-ch">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-ch">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-ch">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'ch'
});
});</code></pre>
</div>
</div>
<div class="group">
<h5>Português</h5>
<div class="language-calendar language-pt-calendar" data-lang="pt"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-pt">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-pt">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-pt">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-pt">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'pt'
});
});</code></pre>
</div>
</div>
<div class="group">
<h5>Danish</h5>
<div class="language-calendar language-da-calendar" data-lang="da"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-da">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-da">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-da">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-da">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'da'
});
});</code></pre>
</div>
</div>
<h5>Spanish</h5>
<div class="language-calendar language-es-calendar" data-lang="es"></div>
<h5>Supported languages</h5>
<div class="box box-languages" style="display: block;">
<div class="box-languages-set">
<span class="ui label blue tiny">en</span>
<span class="ui label blue tiny">ko</span>
<span class="ui label blue tiny">fr</span>
<span class="ui label blue tiny">ch</span>
</div>
<div class="box-languages-set">
<span class="ui label blue tiny">de</span>
<span class="ui label blue tiny">jp</span>
<span class="ui label blue tiny">pt</span>
<span class="ui label blue tiny">da</span>
</div>
<div class="box-languages-set">
<span class="ui label blue tiny">pl</span>
<span class="ui label blue tiny">es</span>
<span class="ui label blue tiny">fa</span>
<span class="ui label blue tiny">it</span>
</div>
<div class="box-languages-set">
<span class="ui label blue tiny">cs</span>
<span class="ui label blue tiny">uk</span>
<span class="ui label blue tiny">ru</span>
<span class="ui label blue tiny">ka</span>
</div>
<div class="box-languages-set">
<span class="ui label blue tiny">ar</span>
<span class="ui label blue tiny">ca</span>
</div>
</div>
</div>
<div class="article">
<h3><span>📐 Dependency</span></h3>
<p>This plugin has dependencies some javascript library.</p>
<div class="ui piled segments">
<div class="ui segment"><strong><a href="https://www.npmjs.com/package/jquery" target="_blank">jquery</a></strong></div>
<div class="ui segment"><strong><a href="https://www.npmjs.com/package/jquery" target="_blank">moment</a></strong></div>
</div>
<p>or you can use full built-in script</p>
<pre><code class="language-html"><script type="javascript" src="dist/js/pignose.calendar.full.min.js"></script></code></pre>
</div>
<div id="options" class="article">
<h3><span>⚡ Options</span></h3>
<table class="ui table celled">
<colgroup>
<col style="width: 240px;">
<col style="width: 160px;">
<col>
<col style="width: 240px;">
</colgroup>
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>description</th>
<th>default</th>
</tr>
</thead>
<tbody>
<tr>
<td class="code inline"><pre><code class="language-javascript">lang</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>string</span></td>
<td>A language to set to the Calendar</td>
<td class="code inline"><pre><code class="language-javascript">'en'</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">theme</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>string</span></td>
<td>A theme to set to the Calendar. (light, dark, blue)</td>
<td class="code inline"><pre><code class="language-javascript">'light'</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">format</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>string</span></td>
<td>The date format that you want to print to input element by value</td>
<td class="code inline"><pre><code class="language-javascript">'YYYY-MM-DD'</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">date</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>moment</span></td>
<td>You can change auto initialized date at first</td>
<td class="code inline"><pre><code class="language-javascript">moment()</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">week</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>number</span></td>
<td>Your first day of week (0: Sunday ~ 6: Saturday)</td>
<td class="code inline"><pre><code class="language-javascript">0</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">initialize</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>boolean</span></td>
<td>You can turn on/off initialized date or set the initial date by this option</td>
<td class="code inline"><pre><code class="language-javascript">true</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">modal</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>boolean</span></td>
<td>If you want display calendar as modal, You can use by setting modal option to true</td>
<td class="code inline"><pre><code class="language-javascript">false</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">buttons</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>boolean</span></td>
<td>If you are using input type calendar, You can add button controller for confirm by user</td>
<td class="code inline"><pre><code class="language-javascript">false</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">toggle</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>boolean</span></td>
<td>If you set true this option, You can use toggle on your Calendar</td>
<td class="code inline"><pre><code class="language-javascript">false</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">reverse</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>boolean</span></td>
<td>If you toggle option turned on and this option also set true, Inital calendar dates start as
inactive
</td>
<td class="code inline"><pre><code class="language-javascript">false</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">multiple</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>boolean</span></td>
<td>If you set true this option, You can use multiple picker on your Calendar</td>
<td class="code inline"><pre><code class="language-javascript">false</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">pickWeeks</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>boolean</span></td>
<td>If you set true this option, You can use multiple range picker by one click on your Calendar</td>
<td class="code inline"><pre><code class="language-javascript">false</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">selectOver</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>boolean</span></td>
<td>If you set true this option, You can pass the check of disabled dates when multiple mode enabled
</td>
<td class="code inline"><pre><code class="language-javascript">false</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">enabledDates</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>array</span></td>
<td>You can set enabled dates by using date <span class="code inline"><code class="language-javascript">string</code></span> array by formatted to 'YYYY-MM-DD'</td>
<td class="code inline"><pre><code class="language-javascript">[]</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">disabledDates</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>array</span></td>
<td>You can set disabled dates by using date <span class="code inline"><code class="language-javascript">string</code></span> array by formatted to 'YYYY-MM-DD'</td>
<td class="code inline"><pre><code class="language-javascript">[]</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">disabledWeekdays</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>array</span></td>
<td>You can set disabled date by using a weekday number array (This is a sequential number start from
0 [sunday])
</td>
<td class="code inline"><pre><code class="language-javascript">[]</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">disabledRanges</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>array</span></td>
<td>This option is advanced way to using disable settings, You can give multiple disabled range by
double
array date <span class="code inline"><code class="language-javascript">string</code></span> by formatted to 'YYYY-MM-DD'
</td>
<td class="code inline"><pre><code class="language-javascript">[]</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">schedules</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>array</span></td>
<td>Set and array of events to pin on calendar. Each event is an object that must contain a date <span class="code inline"><code class="language-javascript">string</code></span>
formatted to 'YYYY-MM-DD' and class key that belong to classOnEvents dictionary indicating its
color on calendar. Events with not color class suitable are all pin with <span
style="display: inline-block; width: .8em; height: .8em; background-color: #5c6270;"></span> #5c6270
Issues may arise when the number of color class increase, this could break the calendar cell.
</td>
<td class="code inline"><pre><code class="language-javascript">[]</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">scheduleOptions.colors</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>object</span></td>
<td>Set a dictionary with class 'key' and color code 'value' used for pin events class by date</td>
<td class="code inline"><pre><code class="language-javascript">{}</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">minDate</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>string</span></td>
<td>You can give a minimum disable date range by 'YYYY-MM-DD' formatted <span class="code inline"><code class="language-javascript">string</code></span></td>
<td class="code inline"><pre><code class="language-javascript">null</code></pre></td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">maxDate</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>array</span></td>
<td>You can give a maximum disable date range by 'YYYY-MM-DD' formatted <span class="code inline"><code class="language-javascript">string</code></span></td>
<td class="code inline"><pre><code class="language-javascript">null</code></pre></td>
</tr>
</tbody>
</table>
</div>
<div id="callbacks" class="article">
<h3><span>⚡ Callbacks</span></h3>
<table class="ui table celled">
<colgroup>
<col style="width: 240px;">
<col style="width: 160px;">
<col>
</colgroup>
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="code inline"><pre><code class="language-javascript">init(context)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>This callback will be called once when you call the pignoseCalendar plugin and created calendar
view
</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">page(info, context)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>This callback will be called when you click prev, next arrow button on the top of calendar</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">prev(info, context)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>This callback will be called when you click prev arrow button on the top of calendar</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">next(info, context)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>This callback will be called when you click next arrow button on the top of calendar</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">select(date, context)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>This callback will be called when you select a date of calendar except disabled date (date click)
</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">click(event, context)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>This callback will be called when you click a date of calendar (date click)</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">apply(date, context)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>This callback will be called when you apply a date of calendar. (OK button click)</td>
</tr>
</tbody>
</table>
</div>
<div id="methods" class="article">
<h3><span>⚡ Methods</span></h3>
<p>
You can use the method like
<span class="code inline">
<code class="language-javascript">$element.pignoseCalendar('method name', arguments);</code>
</span>
format.
</p>
<table class="ui table celled">
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="code inline"><pre><code class="language-javascript">set(date)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>
You can set the specific date on calendar dynamically.<br/>
The first parameter must <span class="code inline"><code class="language-javascript">string</code></span> or <span class="code inline"><code class="language-javascript">moment</code></span>
type.
</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">select(day)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>You can click day by using this method, First argument must be <span class="code inline"><code class="language-javascript">number</code></span>
type.
</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">setting(object)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>You can set the setting option dynamically, The option is the same you gave when initialize the
plugin
</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">configure(object)</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>
You can set the global setting by using this method, If you set default language entirely, Use this method
</td>
</tr>
<tr>
<td class="code inline"><pre><code class="language-javascript">init()</code></pre></td>
<td class="center"><span class="ui label"><i class="fas fa-code"></i>function</span></td>
<td>
This method is used internal of the plugin.<br/>
Use the syntax sugar <span class="code inline"><code class="language-javascript">$element.pignoseCalendar()</code></span> pattern<br/>
It is exactly the same one as above pattern
</td>
</tr>
</tbody>
</table>
</div>
<div id="star" class="article">
<h3>
<span>😗 do star it!</span>
</h3>
<p>If you enjoyed it, please just click the star into below github link</p>
<a href="https://github.com/KennethanCeyer/pg-calendar" target="_blank" class="ui black button thin">
<i class="fab fa-github-alt"></i>
GitHub
</a>
</div>
<div id="npm" class="article">
<h3><span>📦 npm</span></h3>
<pre><code class="language-bash">$ npm install pg-calendar</code></pre>
</div>
<div id="yarn" class="article">
<h3><span>📦 yarn</span></h3>
<pre><code class="language-bash">$ yarn add pg-calendar</code></pre>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
<script type="text/javascript" src="dist/js/pignose.calendar.full.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
$('#wrapper .version strong').text('v' + $.fn.pignoseCalendar.version);
function onSelectHandler(date, context) {
/**
* @date is an array which be included dates(clicked date at first index)
* @context is an object which stored calendar interal data.
* @context.calendar is a root element reference.
* @context.calendar is a calendar element reference.
* @context.storage.activeDates is all toggled data, If you use toggle type calendar.
* @context.storage.events is all events associated to this date
*/
var $element = context.element;
var $calendar = context.calendar;
var $box = $element.siblings('.box').show();
var text = 'You selected date ';
if (date[0] !== null) {
text += date[0].format('YYYY-MM-DD');
}
if (date[0] !== null && date[1] !== null) {
text += ' ~ ';
}
else if (date[0] === null && date[1] == null) {
text += 'nothing';
}
if (date[1] !== null) {
text += date[1].format('YYYY-MM-DD');
}
$box.text(text);
}
function onApplyHandler(date, context) {
/**
* @date is an array which be included dates(clicked date at first index)
* @context is an object which stored calendar interal data.
* @context.calendar is a root element reference.
* @context.calendar is a calendar element reference.
* @context.storage.activeDates is all toggled data, If you use toggle type calendar.
* @context.storage.events is all events associated to this date
*/
var $element = context.element;
var $calendar = context.calendar;
var $box = $element.siblings('.box').show();
var text = 'You applied date ';
if (date[0] !== null) {
text += date[0].format('YYYY-MM-DD');
}
if (date[0] !== null && date[1] !== null) {
text += ' ~ ';
}
else if (date[0] === null && date[1] == null) {
text += 'nothing';
}
if (date[1] !== null) {
text += date[1].format('YYYY-MM-DD');
}
$box.text(text);
}
// Default Calendar
$('.calendar').pignoseCalendar({
select: onSelectHandler
});
// Input Calendar
$('.input-calendar').pignoseCalendar({
apply: onApplyHandler,
buttons: true, // It means you can give bottom button controller to the modal which be opened when you click.
});
// Calendar modal
var $btn = $('.btn-calendar').pignoseCalendar({
apply: onApplyHandler,
modal: true, // It means modal will be showed when you click the target button.
buttons: true
});
// Color theme type Calendar
$('.calendar-dark').pignoseCalendar({
theme: 'dark', // light, dark, blue
select: onSelectHandler
});
// Blue theme type Calendar
$('.calendar-blue').pignoseCalendar({
theme: 'blue', // light, dark, blue
select: onSelectHandler
});
// Schedule Calendar
$('.calendar-schedules').pignoseCalendar({
scheduleOptions: {
colors: {
holiday: '#2fabb7',
seminar: '#5c6270',
meetup: '#ef8080'
}
},
schedules: [{
name: 'holiday',
date: '2017-08-08'
}, {
name: 'holiday',
date: '2017-09-16'
}, {
name: 'holiday',
date: '2017-10-01',
}, {
name: 'holiday',
date: '2017-10-05'
}, {
name: 'holiday',
date: '2017-10-18',
}, {
name: 'seminar',
date: '2017-11-14'
}, {
name: 'seminar',
date: '2017-12-01',
}, {
name: 'meetup',
date: '2018-01-16'
}, {
name: 'meetup',
date: '2018-02-01',
}, {
name: 'meetup',
date: '2018-02-18'
}, {
name: 'meetup',
date: '2018-03-04',
}, {
name: 'meetup',
date: '2018-04-01'
}, {
name: 'meetup',
date: '2018-04-19',
}],
select: function (date, context) {
var message = `You selected ${(date[0] === null ? 'null' : date[0].format('YYYY-MM-DD'))}.
<br />
<br />
<strong>Events for this date</strong>
<br />
<br />
<div class="schedules-date"></div>`;
var $target = context.calendar.parent().next().show().html(message);
for (var idx in context.storage.schedules) {
var schedule = context.storage.schedules[idx];
if (typeof schedule !== 'object') {
continue;
}
$target.find('.schedules-date').append('<span class="ui label default">' + schedule.name + '</span>');
}
}
});
// Multiple picker type Calendar
$('.multi-select-calendar').pignoseCalendar({
multiple: true,
select: onSelectHandler
});
// Toggle type Calendar
$('.toggle-calendar').pignoseCalendar({
toggle: true,
select: function (date, context) {
var message = `You selected ${(date[0] === null ? 'null' : date[0].format('YYYY-MM-DD'))}.
<br />
<br />
<strong>Events for this date</strong>
<br />
<br />
<div class="active-dates"></div>`;
var $target = context.calendar.parent().next().show().html(message);
for (var idx in context.storage.activeDates) {
var date = context.storage.activeDates[idx];
if (typeof date !== '<span class="ui label"><i class="fas fa-code"></i>string</span>') {
continue;
}
$target.find('.active-dates').append('<span class="ui label default">' + date + '</span>');
}
}
});
// Disabled date settings.
(function () {
// IIFE Closure
var times = 30;
var disabledDates = [];
for (var i = 0; i < times; /* Do not increase index */) {
var year = moment().year();
var month = 0;
var day = parseInt(Math.random() * 364 + 1);
var date = moment().year(year).month(month).date(day).format('YYYY-MM-DD');
if ($.inArray(date, disabledDates) === -1) {
disabledDates.push(date);
i++;
}
}
disabledDates.sort();
var $dates = $('.disabled-dates-calendar').siblings('.guide').find('.guide-dates');
for (var idx in disabledDates) {
$dates.append('<span>' + disabledDates[idx] + '</span>');
}
$('.disabled-dates-calendar').pignoseCalendar({
select: onSelectHandler,
disabledDates: disabledDates
});
}());
// Disabled Weekdays Calendar.
$('.disabled-weekdays-calendar').pignoseCalendar({
select: onSelectHandler,
disabledWeekdays: [0, 6]
});
// Disabled Range Calendar.
var minDate = moment().set('dates', Math.min(moment().day(), 2 + 1)).format('YYYY-MM-DD');
var maxDate = moment().set('dates', Math.max(moment().day(), 24 + 1)).format('YYYY-MM-DD');
$('.disabled-range-calendar').pignoseCalendar({
select: onSelectHandler,
minDate: minDate,
maxDate: maxDate
});
// Multiple Week Select
$('.pick-weeks-calendar').pignoseCalendar({
pickWeeks: true,
multiple: true,
select: onSelectHandler
});
// Disabled Ranges Calendar.
$('.disabled-ranges-calendar').pignoseCalendar({
select: onSelectHandler,
disabledRanges: [
['2016-10-05', '2016-10-21'],
['2016-11-01', '2016-11-07'],
['2016-11-19', '2016-11-21'],
['2016-12-05', '2016-12-08'],
['2016-12-17', '2016-12-18'],
['2016-12-29', '2016-12-30'],
['2017-01-10', '2017-01-20'],
['2017-02-10', '2017-04-11'],
['2017-07-04', '2017-07-09'],
['2017-12-01', '2017-12-25'],
['2018-02-10', '2018-02-26'],
['2018-05-10', '2018-09-17'],
]
});
// I18N Calendar
$('.language-calendar').each(function () {
var $this = $(this);
var lang = $this.data('lang');
$this.pignoseCalendar({
lang: lang
});
});
// This use for DEMO page tab component.
$('.menu .item').tab();
});
//]]>
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/prism.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-javascript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-typescript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/components/prism-json.min.js"></script>
<script type="text/javascript" src="https://twemoji.maxcdn.com/2/twemoji.min.js?2.5"></script>
</body>
</html>