{"id":13468702,"url":"https://github.com/nathanstitt/dayz","last_synced_at":"2025-04-05T07:03:51.006Z","repository":{"id":1765176,"uuid":"44082356","full_name":"nathanstitt/dayz","owner":"nathanstitt","description":"A calendar component for React","archived":false,"fork":false,"pushed_at":"2022-12-11T03:05:28.000Z","size":5228,"stargazers_count":239,"open_issues_count":6,"forks_count":42,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-01-09T07:35:28.532Z","etag":null,"topics":["calendar","hacktoberfest","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nathanstitt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-12T03:35:13.000Z","updated_at":"2024-12-16T15:59:04.000Z","dependencies_parsed_at":"2023-01-11T16:05:49.809Z","dependency_job_id":null,"html_url":"https://github.com/nathanstitt/dayz","commit_stats":null,"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Fdayz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Fdayz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Fdayz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Fdayz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathanstitt","download_url":"https://codeload.github.com/nathanstitt/dayz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299831,"owners_count":20916190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","hacktoberfest","react"],"created_at":"2024-07-31T15:01:17.047Z","updated_at":"2025-04-05T07:03:50.990Z","avatar_url":"https://github.com/nathanstitt.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## A day/week/monthly calendar component for React\n\n[![Build Status](https://travis-ci.org/nathanstitt/dayz.svg?branch=master)](https://travis-ci.org/nathanstitt/dayz)\n\n## Features\n* Only includes the minimal amount of features needed.\n    * There is no paging controls provided, as they can easily be implemented outside the component.  This allows Dayz to be used both as a traditional next or previous month calendar or as part of a scrolling infinite view.\n* Modern styling and layout\n    * Uses css grid and flexbox layout\n    * All heights/widths are specified as percentages so the component will size to fit whatever container it's rendered into.\n    * Styles are written in [scss](dayz.scss) with variables which can be modified for customized builds.\n* Care is taken to retain elements when switching view types, this allows minimal DOM reflow and allows nice animation effects where events warp into position.\n\n![Dayz Monthly Screenshot](http://nathanstitt.github.io/dayz/dayz-weekly-screenshot.png)\n\n## Demo\n\nAn interactive demo can be viewed at: http://nathanstitt.github.io/dayz/\n\nThe demo source for the demo is [demo.jsx](demo.jsx)\n\n## Usage\n\n```bash\nnpm install dayz --save\n-- or --\nyarn add dayz\n```\n\n```js\nimport React from 'react';\nimport Dayz from 'dayz';\n// could also import the sass if you have a loader at dayz/dayz.scss\nimport \"dayz/dist/dayz.css\";\nimport moment from 'moment';\n\n// would come from a network request in a \"real\" app\nconst EVENTS = new Dayz.EventsCollection([\n    { content: 'A short event',\n      range: moment.range( date.clone(),\n                           date.clone().add(1, 'day') ) },\n    { content: 'Two Hours ~ 8-10',\n      range: moment.range( date.clone().hour(8),\n                           date.clone().hour(10) ) },\n    { content: \"A Longer Event\",\n      range: moment.range( date.clone().subtract(2,'days'),\n                           date.clone().add(8,'days') ) }\n]);\n\nclass MyComponent extends React.Component {\n\n    render() {\n        return \u003cDayz\n                   display='week'\n                   date={this.props.date}\n                   events={EVENTS}\n               /\u003e\n    }\n\n}\n```\n\n## API\n\nThe Dayz component accepts these properties:\n\n * **date** (required):     An `momentjs` instance that controls what range is displayed. The calendar will automatically calculate the month or week that contains this date and display the appropriate range.\n * **events** (optional):  An `Dayz.EventsCollection` instance that contains events that should be displayed on the calendar.\n   * `Dayz.EventsCollection` accepts two arguments:\n     * An array of events\n     * a list of optional properties. Currently two options that can be set are:\n       * **displayAllDay**, If set to `true` it will show events that are marked as an all day event at the top of the week and day views prior to showing other events.  If `false`, events marked as an all day event will completely fill the column for the day, with other events appearing on top of it.  defaults to `true`.  Please note: Although sometimes useful, if set to false it can create a very cluttered calendar.\n       * **displayLabelForAllDays**, If set to `false`, for events that are shown on multiple days only the first event will have the `content` attribute shown. In any other case `content` will be shown on every day. This prop works only if `displayAllDay` is `false`.\n * **highlightDays**:  either a function or an array of days that should be highlighted.  Each day can be a string date that momentjs accepts, a JS Date object, or a momentjs date.  if using a function, it will be passed the day and should return either false, or a string to use for the className.\n * **dayEventHandlers** event handlers to attach on the Day element, such as onClick, onMouseOver, etc.\n   * if **onClick** or **onDoubleClick** is given to dayEventHandlers, the call back will be passed two variables, the event and a `momentjs` date.  Hours/Minutes are added to the date to reflect how far down the Y axis was clicked.\n * **display** (optional, defaults to 'month'):  One of month, week, or day.\n * **onEventClick**, **onEventDoubleClick** (optional): A function that will be called whenever an event is clicked, it's passed two variables, the event and the layout information for the event.  The layout has an `event` subkey that includes the event itself.\n * **displayHours** (optional): defaults to 7am to 7pm or the earliest/latest event's hour.\n * **timeFormat** (optional): defaults to `ha` configures y labels time format\n * **locale** (optional): defaults to `en`. A string to determine the localization.\n * **weekStartsOn** (optional): defaults to `undefined`. Determines whether the week should start on Monday or Sunday. By default it uses what the localization offers (see `locale` prop). It can accept either `0` to start the week on Sunday or `1` to start the week on Monday.\n\nDayz applies these css classes:\n * The reference **date** prop will have a css class \"current\"\n * Days before and after that date will get \"before\" and \"after\" respectively\n * highlighted days will be marked as \"highlight\" by default, or whatever is returned from the function\n\n\n### Development\n\n- `npm start` starts up a local development web-server which rebuilds files when changed\n   - the demo can then be accessed at http://localhost:2222/docs/ \n- `npm test` runs unit tests\n- `npm run build` compiles files in preparation for publishing\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanstitt%2Fdayz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathanstitt%2Fdayz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanstitt%2Fdayz/lists"}