All Projects β†’ yscoder β†’ Calendar

yscoder / Calendar

Licence: other
A calendar picker component, based on jQuery.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to Calendar

React Datepicker
πŸ“… React DatePicker Library (Flexible, Reusable)
Stars: ✭ 165 (+236.73%)
Mutual labels:  calendar, datepicker
Calendarview
A highly customizable calendar library for Android, powered by RecyclerView.
Stars: ✭ 2,862 (+5740.82%)
Mutual labels:  calendar, datepicker
React Datepicker2
react datepicker component.(include persian jalaali calendar)
Stars: ✭ 191 (+289.8%)
Mutual labels:  calendar, datepicker
React Calendar
React.js Calendar Component (npm install react-calendar-component) πŸ“…
Stars: ✭ 142 (+189.8%)
Mutual labels:  calendar, datepicker
ionic4-datepicker
Ionic 4 Datepicker component
Stars: ✭ 78 (+59.18%)
Mutual labels:  calendar, datepicker
React Native Dates
React Native date / daterange picker and calendar
Stars: ✭ 145 (+195.92%)
Mutual labels:  calendar, datepicker
Datepicker
Get a date with JavaScript! A datepicker with no dependencies.
Stars: ✭ 212 (+332.65%)
Mutual labels:  calendar, datepicker
Persiandatepicker
An Android DatePicker for Persian Calendar
Stars: ✭ 86 (+75.51%)
Mutual labels:  calendar, datepicker
ionic4-date-picker
Calendar date picker for Ionic4 apps
Stars: ✭ 24 (-51.02%)
Mutual labels:  calendar, datepicker
react-native-daterange-picker
A React Native component for picking date ranges or single dates.
Stars: ✭ 86 (+75.51%)
Mutual labels:  calendar, datepicker
Calendar
πŸ“† calendar ζ—₯εŽ†
Stars: ✭ 119 (+142.86%)
Mutual labels:  calendar, datepicker
vuejs3-datepicker
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.
Stars: ✭ 23 (-53.06%)
Mutual labels:  calendar, datepicker
React Numpad
A numpad for number, date and time, built with and for React.
Stars: ✭ 117 (+138.78%)
Mutual labels:  calendar, datepicker
Things Calendar
Simple but elegant datepicker for the web β€” inspired by Things for mac
Stars: ✭ 165 (+236.73%)
Mutual labels:  calendar, datepicker
Pg Calendar
πŸ“† beautiful and eidetic date picker
Stars: ✭ 109 (+122.45%)
Mutual labels:  calendar, datepicker
Hotel Datepicker
Date range picker for hotels
Stars: ✭ 202 (+312.24%)
Mutual labels:  calendar, datepicker
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (+61.22%)
Mutual labels:  calendar, datepicker
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (+73.47%)
Mutual labels:  calendar, datepicker
Vue Datepicker Ui
Datepicker Component For Vue
Stars: ✭ 252 (+414.29%)
Mutual labels:  calendar, datepicker
nepali date picker
Material Style Date Picker with Bikram Sambat(Nepali) Calendar Support. Supports both Android and ios.
Stars: ✭ 30 (-38.78%)
Mutual labels:  calendar, datepicker

Calendar

A calendar component, based on jQuery. Demo


Depend

<link rel="stylesheet" href="calendar.css">
<script src="jquery.js"></script>
<script src="calendar.js"></script>

Use

<div id="ca"></div>

<script>
$('#ca').calendar({
  // options
});
</script>

or

<input type="text" id="in">
<div id="ca"></div>
<script>
$('#ca').calendar({
  trigger: '#in'
  // options
});
</script>

Options

{

    // width
    width: 280,

    // height, 
    height: 280,

    // zIndex
    zIndex: 1,

    // set the trigger selector
    trigger: null,

    // offset position
    offset: [0, 1],

    // override class
    customClass: '',

    // set display view, optional date or month
    view: 'date',

    // set current date
    date: new Date(),

    // date format
    format: 'yyyy/mm/dd',

    // first day of the week
    startWeek: 0,

    // week format
    weekArray: ['ζ—₯', 'δΈ€', '二', 'δΈ‰', 'ε››', 'δΊ”', 'ε…­'],

    // month format
    monthArray: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

    // optional date range
    // value: `[ start date[, end date] ]`
    // Fixed date range: [new Date(2016, 0, 1), new Date(2016, 11, 31)] or ['2016/1/1', '2016/12/1']
    // Starting today: [new Date(), null] or [new Date()]
    selectedRang: null,

    // display data when mouse hover
    // value: `[{ date: String || Date, value: object }, ... ]`
    // example: [ { date: '2016/1/1', value: 'A new Year'} ] or [ { date: new Date(), value: 'What to do'} ]
    data: null,

    // data label format
    // No display is set to `false`
    label: '{d}\n{v}',

    // arrow characters
    prev: '&lt;',
    next: '&gt;',

    // callback function when view changed
    // params: view, y, m
    viewChange: $.noop,

    // callback function when selected
    onSelected: function (view, date, value) {
        // body...
    },

    // callback function when mouseenter
    onMouseenter: $.noop,

    // callback function when closed
    onClose: $.noop
}

Methods

$element.calendar(method, value)
  • setDate:Setting selected date.
  • setData:Setting hover data.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].