@ -0,0 +1,378 @@ | |||
DOMPurify | |||
Copyright 2015 Mario Heiderich | |||
DOMPurify is free software; you can redistribute it and/or modify it under the | |||
terms of either: | |||
a) the Apache License Version 2.0, or | |||
b) the Mozilla Public License Version 2.0 | |||
----------------------------------------------------------------------------- | |||
Licensed under the Apache License, Version 2.0 (the "License"); | |||
you may not use this file except in compliance with the License. | |||
You may obtain a copy of the License at | |||
http://www.apache.org/licenses/LICENSE-2.0 | |||
Unless required by applicable law or agreed to in writing, software | |||
distributed under the License is distributed on an "AS IS" BASIS, | |||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |||
See the License for the specific language governing permissions and | |||
limitations under the License. | |||
----------------------------------------------------------------------------- | |||
Mozilla Public License, version 2.0 | |||
1. Definitions | |||
1.1. “Contributor” | |||
means each individual or legal entity that creates, contributes to the | |||
creation of, or owns Covered Software. | |||
1.2. “Contributor Version” | |||
means the combination of the Contributions of others (if any) used by a | |||
Contributor and that particular Contributor’s Contribution. | |||
1.3. “Contribution” | |||
means Covered Software of a particular Contributor. | |||
1.4. “Covered Software” | |||
means Source Code Form to which the initial Contributor has attached the | |||
notice in Exhibit A, the Executable Form of such Source Code Form, and | |||
Modifications of such Source Code Form, in each case including portions | |||
thereof. | |||
1.5. “Incompatible With Secondary Licenses” | |||
means | |||
a. that the initial Contributor has attached the notice described in | |||
Exhibit B to the Covered Software; or | |||
b. that the Covered Software was made available under the terms of version | |||
1.1 or earlier of the License, but not also under the terms of a | |||
Secondary License. | |||
1.6. “Executable Form” | |||
means any form of the work other than Source Code Form. | |||
1.7. “Larger Work” | |||
means a work that combines Covered Software with other material, in a separate | |||
file or files, that is not Covered Software. | |||
1.8. “License” | |||
means this document. | |||
1.9. “Licensable” | |||
means having the right to grant, to the maximum extent possible, whether at the | |||
time of the initial grant or subsequently, any and all of the rights conveyed by | |||
this License. | |||
1.10. “Modifications” | |||
means any of the following: | |||
a. any file in Source Code Form that results from an addition to, deletion | |||
from, or modification of the contents of Covered Software; or | |||
b. any new file in Source Code Form that contains any Covered Software. | |||
1.11. “Patent Claims” of a Contributor | |||
means any patent claim(s), including without limitation, method, process, | |||
and apparatus claims, in any patent Licensable by such Contributor that | |||
would be infringed, but for the grant of the License, by the making, | |||
using, selling, offering for sale, having made, import, or transfer of | |||
either its Contributions or its Contributor Version. | |||
1.12. “Secondary License” | |||
means either the GNU General Public License, Version 2.0, the GNU Lesser | |||
General Public License, Version 2.1, the GNU Affero General Public | |||
License, Version 3.0, or any later versions of those licenses. | |||
1.13. “Source Code Form” | |||
means the form of the work preferred for making modifications. | |||
1.14. “You” (or “Your”) | |||
means an individual or a legal entity exercising rights under this | |||
License. For legal entities, “You” includes any entity that controls, is | |||
controlled by, or is under common control with You. For purposes of this | |||
definition, “control” means (a) the power, direct or indirect, to cause | |||
the direction or management of such entity, whether by contract or | |||
otherwise, or (b) ownership of more than fifty percent (50%) of the | |||
outstanding shares or beneficial ownership of such entity. | |||
2. License Grants and Conditions | |||
2.1. Grants | |||
Each Contributor hereby grants You a world-wide, royalty-free, | |||
non-exclusive license: | |||
a. under intellectual property rights (other than patent or trademark) | |||
Licensable by such Contributor to use, reproduce, make available, | |||
modify, display, perform, distribute, and otherwise exploit its | |||
Contributions, either on an unmodified basis, with Modifications, or as | |||
part of a Larger Work; and | |||
b. under Patent Claims of such Contributor to make, use, sell, offer for | |||
sale, have made, import, and otherwise transfer either its Contributions | |||
or its Contributor Version. | |||
2.2. Effective Date | |||
The licenses granted in Section 2.1 with respect to any Contribution become | |||
effective for each Contribution on the date the Contributor first distributes | |||
such Contribution. | |||
2.3. Limitations on Grant Scope | |||
The licenses granted in this Section 2 are the only rights granted under this | |||
License. No additional rights or licenses will be implied from the distribution | |||
or licensing of Covered Software under this License. Notwithstanding Section | |||
2.1(b) above, no patent license is granted by a Contributor: | |||
a. for any code that a Contributor has removed from Covered Software; or | |||
b. for infringements caused by: (i) Your and any other third party’s | |||
modifications of Covered Software, or (ii) the combination of its | |||
Contributions with other software (except as part of its Contributor | |||
Version); or | |||
c. under Patent Claims infringed by Covered Software in the absence of its | |||
Contributions. | |||
This License does not grant any rights in the trademarks, service marks, or | |||
logos of any Contributor (except as may be necessary to comply with the | |||
notice requirements in Section 3.4). | |||
2.4. Subsequent Licenses | |||
No Contributor makes additional grants as a result of Your choice to | |||
distribute the Covered Software under a subsequent version of this License | |||
(see Section 10.2) or under the terms of a Secondary License (if permitted | |||
under the terms of Section 3.3). | |||
2.5. Representation | |||
Each Contributor represents that the Contributor believes its Contributions | |||
are its original creation(s) or it has sufficient rights to grant the | |||
rights to its Contributions conveyed by this License. | |||
2.6. Fair Use | |||
This License is not intended to limit any rights You have under applicable | |||
copyright doctrines of fair use, fair dealing, or other equivalents. | |||
2.7. Conditions | |||
Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in | |||
Section 2.1. | |||
3. Responsibilities | |||
3.1. Distribution of Source Form | |||
All distribution of Covered Software in Source Code Form, including any | |||
Modifications that You create or to which You contribute, must be under the | |||
terms of this License. You must inform recipients that the Source Code Form | |||
of the Covered Software is governed by the terms of this License, and how | |||
they can obtain a copy of this License. You may not attempt to alter or | |||
restrict the recipients’ rights in the Source Code Form. | |||
3.2. Distribution of Executable Form | |||
If You distribute Covered Software in Executable Form then: | |||
a. such Covered Software must also be made available in Source Code Form, | |||
as described in Section 3.1, and You must inform recipients of the | |||
Executable Form how they can obtain a copy of such Source Code Form by | |||
reasonable means in a timely manner, at a charge no more than the cost | |||
of distribution to the recipient; and | |||
b. You may distribute such Executable Form under the terms of this License, | |||
or sublicense it under different terms, provided that the license for | |||
the Executable Form does not attempt to limit or alter the recipients’ | |||
rights in the Source Code Form under this License. | |||
3.3. Distribution of a Larger Work | |||
You may create and distribute a Larger Work under terms of Your choice, | |||
provided that You also comply with the requirements of this License for the | |||
Covered Software. If the Larger Work is a combination of Covered Software | |||
with a work governed by one or more Secondary Licenses, and the Covered | |||
Software is not Incompatible With Secondary Licenses, this License permits | |||
You to additionally distribute such Covered Software under the terms of | |||
such Secondary License(s), so that the recipient of the Larger Work may, at | |||
their option, further distribute the Covered Software under the terms of | |||
either this License or such Secondary License(s). | |||
3.4. Notices | |||
You may not remove or alter the substance of any license notices (including | |||
copyright notices, patent notices, disclaimers of warranty, or limitations | |||
of liability) contained within the Source Code Form of the Covered | |||
Software, except that You may alter any license notices to the extent | |||
required to remedy known factual inaccuracies. | |||
3.5. Application of Additional Terms | |||
You may choose to offer, and to charge a fee for, warranty, support, | |||
indemnity or liability obligations to one or more recipients of Covered | |||
Software. However, You may do so only on Your own behalf, and not on behalf | |||
of any Contributor. You must make it absolutely clear that any such | |||
warranty, support, indemnity, or liability obligation is offered by You | |||
alone, and You hereby agree to indemnify every Contributor for any | |||
liability incurred by such Contributor as a result of warranty, support, | |||
indemnity or liability terms You offer. You may include additional | |||
disclaimers of warranty and limitations of liability specific to any | |||
jurisdiction. | |||
4. Inability to Comply Due to Statute or Regulation | |||
If it is impossible for You to comply with any of the terms of this License | |||
with respect to some or all of the Covered Software due to statute, judicial | |||
order, or regulation then You must: (a) comply with the terms of this License | |||
to the maximum extent possible; and (b) describe the limitations and the code | |||
they affect. Such description must be placed in a text file included with all | |||
distributions of the Covered Software under this License. Except to the | |||
extent prohibited by statute or regulation, such description must be | |||
sufficiently detailed for a recipient of ordinary skill to be able to | |||
understand it. | |||
5. Termination | |||
5.1. The rights granted under this License will terminate automatically if You | |||
fail to comply with any of its terms. However, if You become compliant, | |||
then the rights granted under this License from a particular Contributor | |||
are reinstated (a) provisionally, unless and until such Contributor | |||
explicitly and finally terminates Your grants, and (b) on an ongoing basis, | |||
if such Contributor fails to notify You of the non-compliance by some | |||
reasonable means prior to 60 days after You have come back into compliance. | |||
Moreover, Your grants from a particular Contributor are reinstated on an | |||
ongoing basis if such Contributor notifies You of the non-compliance by | |||
some reasonable means, this is the first time You have received notice of | |||
non-compliance with this License from such Contributor, and You become | |||
compliant prior to 30 days after Your receipt of the notice. | |||
5.2. If You initiate litigation against any entity by asserting a patent | |||
infringement claim (excluding declaratory judgment actions, counter-claims, | |||
and cross-claims) alleging that a Contributor Version directly or | |||
indirectly infringes any patent, then the rights granted to You by any and | |||
all Contributors for the Covered Software under Section 2.1 of this License | |||
shall terminate. | |||
5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user | |||
license agreements (excluding distributors and resellers) which have been | |||
validly granted by You or Your distributors under this License prior to | |||
termination shall survive termination. | |||
6. Disclaimer of Warranty | |||
Covered Software is provided under this License on an “as is” basis, without | |||
warranty of any kind, either expressed, implied, or statutory, including, | |||
without limitation, warranties that the Covered Software is free of defects, | |||
merchantable, fit for a particular purpose or non-infringing. The entire | |||
risk as to the quality and performance of the Covered Software is with You. | |||
Should any Covered Software prove defective in any respect, You (not any | |||
Contributor) assume the cost of any necessary servicing, repair, or | |||
correction. This disclaimer of warranty constitutes an essential part of this | |||
License. No use of any Covered Software is authorized under this License | |||
except under this disclaimer. | |||
7. Limitation of Liability | |||
Under no circumstances and under no legal theory, whether tort (including | |||
negligence), contract, or otherwise, shall any Contributor, or anyone who | |||
distributes Covered Software as permitted above, be liable to You for any | |||
direct, indirect, special, incidental, or consequential damages of any | |||
character including, without limitation, damages for lost profits, loss of | |||
goodwill, work stoppage, computer failure or malfunction, or any and all | |||
other commercial damages or losses, even if such party shall have been | |||
informed of the possibility of such damages. This limitation of liability | |||
shall not apply to liability for death or personal injury resulting from such | |||
party’s negligence to the extent applicable law prohibits such limitation. | |||
Some jurisdictions do not allow the exclusion or limitation of incidental or | |||
consequential damages, so this exclusion and limitation may not apply to You. | |||
8. Litigation | |||
Any litigation relating to this License may be brought only in the courts of | |||
a jurisdiction where the defendant maintains its principal place of business | |||
and such litigation shall be governed by laws of that jurisdiction, without | |||
reference to its conflict-of-law provisions. Nothing in this Section shall | |||
prevent a party’s ability to bring cross-claims or counter-claims. | |||
9. Miscellaneous | |||
This License represents the complete agreement concerning the subject matter | |||
hereof. If any provision of this License is held to be unenforceable, such | |||
provision shall be reformed only to the extent necessary to make it | |||
enforceable. Any law or regulation which provides that the language of a | |||
contract shall be construed against the drafter shall not be used to construe | |||
this License against a Contributor. | |||
10. Versions of the License | |||
10.1. New Versions | |||
Mozilla Foundation is the license steward. Except as provided in Section | |||
10.3, no one other than the license steward has the right to modify or | |||
publish new versions of this License. Each version will be given a | |||
distinguishing version number. | |||
10.2. Effect of New Versions | |||
You may distribute the Covered Software under the terms of the version of | |||
the License under which You originally received the Covered Software, or | |||
under the terms of any subsequent version published by the license | |||
steward. | |||
10.3. Modified Versions | |||
If you create software not governed by this License, and you want to | |||
create a new license for such software, you may create and use a modified | |||
version of this License if you rename the license and remove any | |||
references to the name of the license steward (except to note that such | |||
modified license differs from this License). | |||
10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses | |||
If You choose to distribute Source Code Form that is Incompatible With | |||
Secondary Licenses under the terms of this version of the License, the | |||
notice described in Exhibit B of this License must be attached. | |||
Exhibit A - Source Code Form License Notice | |||
This Source Code Form is subject to the | |||
terms of the Mozilla Public License, v. | |||
2.0. If a copy of the MPL was not | |||
distributed with this file, You can | |||
obtain one at | |||
http://mozilla.org/MPL/2.0/. | |||
If it is not possible or desirable to put the notice in a particular file, then | |||
You may include the notice in a location (such as a LICENSE file in a relevant | |||
directory) where a recipient would be likely to look for such a notice. | |||
You may add additional accurate notices of copyright ownership. | |||
Exhibit B - “Incompatible With Secondary Licenses” Notice | |||
This Source Code Form is “Incompatible | |||
With Secondary Licenses”, as defined by | |||
the Mozilla Public License, v. 2.0. | |||
@ -0,0 +1,387 @@ | |||
# DOMPurify | |||
[](http://badge.fury.io/js/dompurify)  [](https://www.npmjs.com/package/dompurify) [](https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js) [](https://packagephobia.now.sh/result?p=dompurify) [](https://github.com/cure53/DOMPurify/network/dependents) | |||
[](https://nodei.co/npm/dompurify/) | |||
DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. | |||
It's also very simple to use and get started with. DOMPurify was [started in February 2014](https://github.com/cure53/DOMPurify/commit/a630922616927373485e0e787ab19e73e3691b2b) and, meanwhile, has reached version 2.3.6. | |||
DOMPurify is written in JavaScript and works in all modern browsers (Safari (10+), Opera (15+), Internet Explorer (10+), Edge, Firefox and Chrome - as well as almost anything else using Blink or WebKit). It doesn't break on MSIE6 or other legacy browsers. It either uses [a fall-back](#what-about-older-browsers-like-msie8) or simply does nothing. | |||
Our automated tests cover [19 different browsers](https://github.com/cure53/DOMPurify/blob/main/test/karma.custom-launchers.config.js#L5) right now, more to come. We also cover Node.js v14.15.1, v15.4.0, v16.13.0, v17.0.0, running DOMPurify on [jsdom](https://github.com/tmpvar/jsdom). Older Node.js versions are known to work as well. | |||
DOMPurify is written by security people who have vast background in web attacks and XSS. Fear not. For more details please also read about our [Security Goals & Threat Model](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model). Please, read it. Like, really. | |||
## What does it do? | |||
DOMPurify sanitizes HTML and prevents XSS attacks. You can feed DOMPurify with string full of dirty HTML and it will return a string (unless configured otherwise) with clean HTML. DOMPurify will strip out everything that contains dangerous HTML and thereby prevent XSS attacks and other nastiness. It's also damn bloody fast. We use the technologies the browser provides and turn them into an XSS filter. The faster your browser, the faster DOMPurify will be. | |||
## How do I use it? | |||
It's easy. Just include DOMPurify on your website. | |||
### Using the unminified development version | |||
```html | |||
<script type="text/javascript" src="src/purify.js"></script> | |||
``` | |||
### Using the minified and tested production version (source-map available) | |||
```html | |||
<script type="text/javascript" src="dist/purify.min.js"></script> | |||
``` | |||
Afterwards you can sanitize strings by executing the following code: | |||
```js | |||
let clean = DOMPurify.sanitize(dirty); | |||
``` | |||
The resulting HTML can be written into a DOM element using `innerHTML` or the DOM using `document.write()`. That is fully up to you. | |||
Note that by default, we permit HTML, SVG **and** MathML. If you only need HTML, which might be a very common use-case, you can easily set that up as well: | |||
```js | |||
let clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } }); | |||
``` | |||
### Is there any foot-gun potential? | |||
Well, please note, if you _first_ sanitize HTML and then modify it _afterwards_, you might easily **void the effects of sanitization**. If you feed the sanitized markup to another library _after_ sanitization, please be certain that the library doesn't mess around with the HTML on its own. | |||
### Okay, makes sense, let's move on | |||
After sanitizing your markup, you can also have a look at the property `DOMPurify.removed` and find out, what elements and attributes were thrown out. Please **do not use** this property for making any security critical decisions. This is just a little helper for curious minds. | |||
If you're using an [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) module loader like [Require.js](http://requirejs.org/), you can load this script asynchronously as well: | |||
```js | |||
import DOMPurify from 'dompurify'; | |||
var clean = DOMPurify.sanitize(dirty); | |||
``` | |||
DOMPurify also works server-side with Node.js as well as client-side via [Browserify](http://browserify.org/) or similar translators. At least Node.js 4.x or newer is required. Our support strives to follow the [Node.js release cycle](https://nodejs.org/en/about/releases/). DOMPurify intends to support any version being flagged as active. At the same time we phase out support for any version flagged as maintenance. DOMPurify might not break with all versions in maintenance immediately but stops to run tests against these older versions. | |||
```bash | |||
npm install dompurify | |||
``` | |||
For JSDOM v10 or newer | |||
```js | |||
const createDOMPurify = require('dompurify'); | |||
const { JSDOM } = require('jsdom'); | |||
const window = new JSDOM('').window; | |||
const DOMPurify = createDOMPurify(window); | |||
const clean = DOMPurify.sanitize(dirty); | |||
``` | |||
For JSDOM versions older than v10 | |||
```js | |||
const createDOMPurify = require('dompurify'); | |||
const jsdom = require('jsdom').jsdom; | |||
const window = jsdom('').defaultView; | |||
const DOMPurify = createDOMPurify(window); | |||
const clean = DOMPurify.sanitize(dirty); | |||
``` | |||
## Is there a demo? | |||
Of course there is a demo! [Play with DOMPurify](https://cure53.de/purify) | |||
## What if I find a _security_ bug? | |||
First of all, please immediately contact us via [email](mailto:mario@cure53.de) so we can work on a fix. [PGP key](https://keyserver.ubuntu.com/pks/lookup?op=vindex&search=0xC26C858090F70ADA) | |||
Also, you probably qualify for a bug bounty! The fine folks over at [Fastmail](https://www.fastmail.com/) use DOMPurify for their services and added our library to their bug bounty scope. So, if you find a way to bypass or weaken DOMPurify, please also have a look at their website and the [bug bounty info](https://www.fastmail.com/about/bugbounty.html). | |||
## Some purification samples please? | |||
How does purified markup look like? Well, [the demo](https://cure53.de/purify) shows it for a big bunch of nasty elements. But let's also show some smaller examples! | |||
```js | |||
DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="x"> | |||
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // becomes <svg><g></g></svg> | |||
DOMPurify.sanitize('<p>abc<iframe//src=jAva	script:alert(3)>def</p>'); // becomes <p>abc</p> | |||
DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // becomes <math><mi></mi></math> | |||
DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // becomes <table><tbody><tr><td>HELLO</td></tr></tbody></table> | |||
DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); // becomes <ul><li><a href="//google.com">click</a></li></ul> | |||
``` | |||
## What is supported? | |||
DOMPurify currently supports HTML5, SVG and MathML. DOMPurify per default allows CSS, HTML custom data attributes. DOMPurify also supports the Shadow DOM - and sanitizes DOM templates recursively. DOMPurify also allows you to sanitize HTML for being used with the jQuery `$()` and `elm.html()` API without any known problems. | |||
## What about older browsers like MSIE8? | |||
DOMPurify offers a fall-back behavior for older MSIE browsers. It uses the MSIE-only `toStaticHTML` feature to sanitize. Note however that in this fall-back mode, pretty much none of the configuration flags shown below have any effect. You need to handle that yourself. | |||
If not even `toStaticHTML` is supported, DOMPurify does nothing at all. It simply returns exactly the string that you fed it. | |||
DOMPurify also exposes a property called `isSupported`, which tells you whether DOMPurify will be able to do its job. | |||
## What about DOMPurify and Trusted Types? | |||
In version 1.0.9, support for [Trusted Types API](https://github.com/WICG/trusted-types) was added to DOMPurify. | |||
In version 2.0.0, a config flag was added to control DOMPurify's behavior regarding this. | |||
When `DOMPurify.sanitize` is used in an environment where the Trusted Types API is available and `RETURN_TRUSTED_TYPE` is set to `true`, it tries to return a `TrustedHTML` value instead of a string (the behavior for `RETURN_DOM` and `RETURN_DOM_FRAGMENT` config options does not change). | |||
## Can I configure DOMPurify? | |||
Yes. The included default configuration values are pretty good already - but you can of course override them. Check out the [`/demos`](https://github.com/cure53/DOMPurify/tree/main/demos) folder to see a bunch of examples on how you can [customize DOMPurify](https://github.com/cure53/DOMPurify/tree/main/demos#what-is-this). | |||
```js | |||
/** | |||
* General settings | |||
*/ | |||
// strip {{ ... }} and <% ... %> to make output safe for template systems | |||
// be careful please, this mode is not recommended for production usage. | |||
// allowing template parsing in user-controlled HTML is not advised at all. | |||
// only use this mode if there is really no alternative. | |||
var clean = DOMPurify.sanitize(dirty, {SAFE_FOR_TEMPLATES: true}); | |||
/** | |||
* Control our allow-lists and block-lists | |||
*/ | |||
// allow only <b> elements, very strict | |||
var clean = DOMPurify.sanitize(dirty, {ALLOWED_TAGS: ['b']}); | |||
// allow only <b> and <q> with style attributes | |||
var clean = DOMPurify.sanitize(dirty, {ALLOWED_TAGS: ['b', 'q'], ALLOWED_ATTR: ['style']}); | |||
// allow all safe HTML elements but neither SVG nor MathML | |||
// note that the USE_PROFILES setting will override the ALLOWED_TAGS setting | |||
// so don't use them together | |||
var clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {html: true}}); | |||
// allow all safe SVG elements and SVG Filters, no HTML or MathML | |||
var clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {svg: true, svgFilters: true}}); | |||
// allow all safe MathML elements and SVG, but no SVG Filters | |||
var clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {mathMl: true, svg: true}}); | |||
// change the default namespace from HTML to something different | |||
var clean = DOMPurify.sanitize(dirty, {NAMESPACE: 'http://www.w3.org/2000/svg'}); | |||
// leave all safe HTML as it is and add <style> elements to block-list | |||
var clean = DOMPurify.sanitize(dirty, {FORBID_TAGS: ['style']}); | |||
// leave all safe HTML as it is and add style attributes to block-list | |||
var clean = DOMPurify.sanitize(dirty, {FORBID_ATTR: ['style']}); | |||
// extend the existing array of allowed tags and add <my-tag> to allow-list | |||
var clean = DOMPurify.sanitize(dirty, {ADD_TAGS: ['my-tag']}); | |||
// extend the existing array of allowed attributes and add my-attr to allow-list | |||
var clean = DOMPurify.sanitize(dirty, {ADD_ATTR: ['my-attr']}); | |||
// prohibit ARIA attributes, leave other safe HTML as is (default is true) | |||
var clean = DOMPurify.sanitize(dirty, {ALLOW_ARIA_ATTR: false}); | |||
// prohibit HTML5 data attributes, leave other safe HTML as is (default is true) | |||
var clean = DOMPurify.sanitize(dirty, {ALLOW_DATA_ATTR: false}); | |||
/** | |||
* Control behavior relating to Custom Elements | |||
*/ | |||
// DOMPurify allows to define rules for Custom Elements. When using the CUSTOM_ELEMENT_HANDLING | |||
// literal, it is possible to define exactly what elements you wish to allow (by default, none are allowed). | |||
// | |||
// The same goes for their attributes. By default, the built-in or configured allow.list is used. | |||
// | |||
// You can use a RegExp literal to specify what is allowed or a predicate, examples for both can be seen below. | |||
// The default values are very restrictive to prevent accidental XSS bypasses. Handle with great care! | |||
var clean = DOMPurify.sanitize( | |||
'<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>', | |||
{ | |||
CUSTOM_ELEMENT_HANDLING: { | |||
tagNameCheck: null, // no custom elements are allowed | |||
attributeNameCheck: null, // default / standard attribute allow-list is used | |||
allowCustomizedBuiltInElements: false, // no customized built-ins allowed | |||
}, | |||
} | |||
); // <div is=""></div> | |||
var clean = DOMPurify.sanitize( | |||
'<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>', | |||
{ | |||
CUSTOM_ELEMENT_HANDLING: { | |||
tagNameCheck: /^foo-/, // allow all tags starting with "foo-" | |||
attributeNameCheck: /baz/, // allow all attributes containing "baz" | |||
allowCustomizedBuiltInElements: false, // customized built-ins are allowed | |||
}, | |||
} | |||
); // <foo-bar baz="foobar"></foo-bar><div is=""></div> | |||
var clean = DOMPurify.sanitize( | |||
'<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>', | |||
{ | |||
CUSTOM_ELEMENT_HANDLING: { | |||
tagNameCheck: (tagName) => tagName.match(/^foo-/), // allow all tags starting with "foo-" | |||
attributeNameCheck: (attr) => attr.match(/baz/), // allow all containing "baz" | |||
allowCustomizedBuiltInElements: true, // allow customized built-ins | |||
}, | |||
} | |||
); // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div> | |||
/** | |||
* Control behavior relating to URI values | |||
*/ | |||
// extend the existing array of elements that can use Data URIs | |||
var clean = DOMPurify.sanitize(dirty, {ADD_DATA_URI_TAGS: ['a', 'area']}); | |||
// extend the existing array of elements that are safe for URI-like values (be careful, XSS risk) | |||
var clean = DOMPurify.sanitize(dirty, {ADD_URI_SAFE_ATTR: ['my-attr']}); | |||
/** | |||
* Control permitted attribute values | |||
*/ | |||
// allow external protocol handlers in URL attributes (default is false, be careful, XSS risk) | |||
// by default only http, https, ftp, ftps, tel, mailto, callto, cid and xmpp are allowed. | |||
var clean = DOMPurify.sanitize(dirty, {ALLOW_UNKNOWN_PROTOCOLS: true}); | |||
// allow specific protocols handlers in URL attributes via regex (default is false, be careful, XSS risk) | |||
// by default only http, https, ftp, ftps, tel, mailto, callto, cid and xmpp are allowed. | |||
// Default RegExp: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; | |||
var clean = DOMPurify.sanitize(dirty, {ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|xxx):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i;}); | |||
/** | |||
* Influence the return-type | |||
*/ | |||
// return a DOM HTMLBodyElement instead of an HTML string (default is false) | |||
var clean = DOMPurify.sanitize(dirty, {RETURN_DOM: true}); | |||
// return a DOM DocumentFragment instead of an HTML string (default is false) | |||
var clean = DOMPurify.sanitize(dirty, {RETURN_DOM_FRAGMENT: true}); | |||
// use the RETURN_TRUSTED_TYPE flag to turn on Trusted Types support if available | |||
var clean = DOMPurify.sanitize(dirty, {RETURN_TRUSTED_TYPE: true}); // will return a TrustedHTML object instead of a string if possible | |||
/** | |||
* Influence how we sanitize | |||
*/ | |||
// return entire document including <html> tags (default is false) | |||
var clean = DOMPurify.sanitize(dirty, {WHOLE_DOCUMENT: true}); | |||
// disable DOM Clobbering protection on output (default is true, handle with care, minor XSS risks here) | |||
var clean = DOMPurify.sanitize(dirty, {SANITIZE_DOM: false}); | |||
// keep an element's content when the element is removed (default is true) | |||
var clean = DOMPurify.sanitize(dirty, {KEEP_CONTENT: false}); | |||
// glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases (default is false) | |||
var clean = DOMPurify.sanitize(dirty, {FORCE_BODY: true}); | |||
// change the parser type so sanitized data is treated as XML and not as HTML, which is the default | |||
var clean = DOMPurify.sanitize(dirty, {PARSER_MEDIA_TYPE: 'application/xhtml+xml'}); | |||
/** | |||
* Influence where we sanitize | |||
*/ | |||
// use the IN_PLACE mode to sanitize a node "in place", which is much faster depending on how you use DOMPurify | |||
var dirty = document.createElement('a'); | |||
dirty.setAttribute('href', 'javascript:alert(1)'); | |||
var clean = DOMPurify.sanitize(dirty, {IN_PLACE: true}); // see https://github.com/cure53/DOMPurify/issues/288 for more info | |||
``` | |||
There is even [more examples here](https://github.com/cure53/DOMPurify/tree/main/demos#what-is-this), showing how you can run, customize and configure DOMPurify to fit your needs. | |||
## Persistent Configuration | |||
Instead of repeatedly passing the same configuration to `DOMPurify.sanitize`, you can use the `DOMPurify.setConfig` method. Your configuration will persist until your next call to `DOMPurify.setConfig`, or until you invoke `DOMPurify.clearConfig` to reset it. Remember that there is only one active configuration, which means once it is set, all extra configuration parameters passed to `DOMPurify.sanitize` are ignored. | |||
## Hooks | |||
DOMPurify allows you to augment its functionality by attaching one or more functions with the `DOMPurify.addHook` method to one of the following hooks: | |||
- `beforeSanitizeElements` | |||
- `uponSanitizeElement` (No 's' - called for every element) | |||
- `afterSanitizeElements` | |||
- `beforeSanitizeAttributes` | |||
- `uponSanitizeAttribute` | |||
- `afterSanitizeAttributes` | |||
- `beforeSanitizeShadowDOM` | |||
- `uponSanitizeShadowNode` | |||
- `afterSanitizeShadowDOM` | |||
It passes the currently processed DOM node, when needed a literal with verified node and attribute data and the DOMPurify configuration to the callback. Check out the [MentalJS hook demo](https://github.com/cure53/DOMPurify/blob/main/demos/hooks-mentaljs-demo.html) to see how the API can be used nicely. | |||
_Example_: | |||
```js | |||
DOMPurify.addHook( | |||
'beforeSanitizeElements', | |||
function (currentNode, hookEvent, config) { | |||
// Do something with the current node and return it | |||
// You can also mutate hookEvent (i.e. set hookEvent.forceKeepAttr = true) | |||
return currentNode; | |||
} | |||
); | |||
``` | |||
## Continuous Integration | |||
We are currently using Github Actions in combination with BrowserStack. This gives us the possibility to confirm for each and every commit that all is going according to plan in all supported browsers. Check out the build logs here: https://github.com/cure53/DOMPurify/actions | |||
You can further run local tests by executing `npm test`. The tests work fine with Node.js v0.6.2 and jsdom@8.5.0. | |||
All relevant commits will be signed with the key `0x24BB6BF4` for additional security (since 8th of April 2016). | |||
### Development and contributing | |||
#### Installation (`npm i`) | |||
We support `npm` officially. GitHub Actions workflow is configured to install dependencies using `npm`. When using deprected version of `npm` we can not fully ensure the versions of installed dependencies which might lead to unanticipated problems. | |||
#### Scripts | |||
We rely on npm run-scripts for integrating with our tooling infrastructure. We use ESLint as a pre-commit hook to ensure code consistency. Moreover, to ease formatting we use [prettier](https://github.com/prettier/prettier) while building the `/dist` assets happens through `rollup`. | |||
These are our npm scripts: | |||
- `npm run dev` to start building while watching sources for changes | |||
- `npm run test` to run our test suite via jsdom and karma | |||
- `test:jsdom` to only run tests through jsdom | |||
- `test:karma` to only run tests through karma | |||
- `npm run lint` to lint the sources using ESLint (via xo) | |||
- `npm run format` to format our sources using prettier to ease to pass ESLint | |||
- `npm run build` to build our distribution assets minified and unminified as a UMD module | |||
- `npm run build:umd` to only build an unminified UMD module | |||
- `npm run build:umd:min` to only build a minified UMD module | |||
Note: all run scripts triggered via `npm run <script>`. | |||
There are more npm scripts but they are mainly to integrate with CI or are meant to be "private" for instance to amend build distribution files with every commit. | |||
## Security Mailing List | |||
We maintain a mailing list that notifies whenever a security-critical release of DOMPurify was published. This means, if someone found a bypass and we fixed it with a release (which always happens when a bypass was found) a mail will go out to that list. This usually happens within minutes or few hours after learning about a bypass. The list can be subscribed to here: | |||
[https://lists.ruhr-uni-bochum.de/mailman/listinfo/dompurify-security](https://lists.ruhr-uni-bochum.de/mailman/listinfo/dompurify-security) | |||
Feature releases will not be announced to this list. | |||
## Who contributed? | |||
Many people helped and help DOMPurify become what it is and need to be acknowledged here! | |||
[jarrodldavis 💸](https://github.com/jarrodldavis), [GrantGryczan 💸](https://github.com/GrantGryczan), [lowdefy 💸](https://twitter.com/lowdefy), [granlem 💸](https://twitter.com/MaximeVeit), [oreoshake 💸](https://github.com/oreoshake), [dcramer 💸](https://github.com/dcramer),[tdeekens ❤️](https://github.com/tdeekens), [peernohell ❤️](https://github.com/peernohell), [is2ei](https://github.com/is2ei), [franktopel](https://github.com/franktopel), [NateScarlet](https://github.com/NateScarlet), [neilj](https://github.com/neilj), [fhemberger](https://github.com/fhemberger), [Joris-van-der-Wel](https://github.com/Joris-van-der-Wel), [ydaniv](https://github.com/ydaniv), [terjanq](https://twitter.com/terjanq), [filedescriptor](https://github.com/filedescriptor), [ConradIrwin](https://github.com/ConradIrwin), [gibson042](https://github.com/gibson042), [choumx](https://github.com/choumx), [0xSobky](https://github.com/0xSobky), [styfle](https://github.com/styfle), [koto](https://github.com/koto), [tlau88](https://github.com/tlau88), [strugee](https://github.com/strugee), [oparoz](https://github.com/oparoz), [mathiasbynens](https://github.com/mathiasbynens), [edg2s](https://github.com/edg2s), [dnkolegov](https://github.com/dnkolegov), [dhardtke](https://github.com/dhardtke), [wirehead](https://github.com/wirehead), [thorn0](https://github.com/thorn0), [styu](https://github.com/styu), [mozfreddyb](https://github.com/mozfreddyb), [mikesamuel](https://github.com/mikesamuel), [jorangreef](https://github.com/jorangreef), [jimmyhchan](https://github.com/jimmyhchan), [jameydeorio](https://github.com/jameydeorio), [jameskraus](https://github.com/jameskraus), [hyderali](https://github.com/hyderali), [hansottowirtz](https://github.com/hansottowirtz), [hackvertor](https://github.com/hackvertor), [freddyb](https://github.com/freddyb), [flavorjones](https://github.com/flavorjones), [djfarrelly](https://github.com/djfarrelly), [devd](https://github.com/devd), [camerondunford](https://github.com/camerondunford), [buu700](https://github.com/buu700), [buildog](https://github.com/buildog), [alabiaga](https://github.com/alabiaga), [Vector919](https://github.com/Vector919), [Robbert](https://github.com/Robbert), [GreLI](https://github.com/GreLI), [FuzzySockets](https://github.com/FuzzySockets), [ArtemBernatskyy](https://github.com/ArtemBernatskyy), [@garethheyes](https://twitter.com/garethheyes), [@shafigullin](https://twitter.com/shafigullin), [@mmrupp](https://twitter.com/mmrupp), [@irsdl](https://twitter.com/irsdl),[ShikariSenpai](https://github.com/ShikariSenpai), [ansjdnakjdnajkd](https://github.com/ansjdnakjdnajkd), [@asutherland](https://twitter.com/asutherland), [@mathias](https://twitter.com/mathias), [@cgvwzq](https://twitter.com/cgvwzq), [@robbertatwork](https://twitter.com/robbertatwork), [@giutro](https://twitter.com/giutro), [@CmdEngineer\_](https://twitter.com/CmdEngineer_), [@avr4mit](https://twitter.com/avr4mit) and especially [@securitymb ❤️](https://twitter.com/securitymb) & [@masatokinugawa ❤️](https://twitter.com/masatokinugawa) | |||
## Testing powered by | |||
<a target="_blank" href="https://www.browserstack.com/"><img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png"></a><br> | |||
And last but not least, thanks to [BrowserStack Open-Source Program](https://www.browserstack.com/open-source) for supporting this project with their services for free and delivering excellent, dedicated and very professional support on top of that. |
@ -0,0 +1,160 @@ | |||
{ | |||
"_from": "dompurify@^2.3.1", | |||
"_id": "dompurify@2.3.6", | |||
"_inBundle": false, | |||
"_integrity": "sha512-OFP2u/3T1R5CEgWCEONuJ1a5+MFKnOYpkywpUSxv/dj1LeBT1erK+JwM7zK0ROy2BRhqVCf0LRw/kHqKuMkVGg==", | |||
"_location": "/dompurify", | |||
"_phantomChildren": {}, | |||
"_requested": { | |||
"type": "range", | |||
"registry": true, | |||
"raw": "dompurify@^2.3.1", | |||
"name": "dompurify", | |||
"escapedName": "dompurify", | |||
"rawSpec": "^2.3.1", | |||
"saveSpec": null, | |||
"fetchSpec": "^2.3.1" | |||
}, | |||
"_requiredBy": [ | |||
"/tui-calendar" | |||
], | |||
"_resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.6.tgz", | |||
"_shasum": "2e019d7d7617aacac07cbbe3d88ae3ad354cf875", | |||
"_spec": "dompurify@^2.3.1", | |||
"_where": "/usr/lib/python3/dist-packages/odoo/kalachakra_module/kalachakra/static/node_modules/tui-calendar", | |||
"author": { | |||
"name": "Mario Heiderich", | |||
"email": "mario@cure53.de", | |||
"url": "https://cure53.de/" | |||
}, | |||
"browser": "dist/purify.js", | |||
"bugs": { | |||
"url": "https://github.com/cure53/DOMPurify/issues" | |||
}, | |||
"bundleDependencies": false, | |||
"deprecated": false, | |||
"description": "DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's written in JavaScript and works in all modern browsers (Safari, Opera (15+), Internet Explorer (10+), Firefox and Chrome - as well as almost anything else using Blink or WebKit). DOMPurify is written by security people who have vast background in web attacks and XSS. Fear not.", | |||
"devDependencies": { | |||
"@babel/plugin-external-helpers": "7.12.13", | |||
"babel-core": "^6.26.3", | |||
"babel-preset-env": "^1.7.0", | |||
"cross-env": "^7.0.3", | |||
"eslint-config-prettier": "^8.3.0", | |||
"eslint-plugin-prettier": "^4.0.0", | |||
"he": "^1.2.0", | |||
"jquery": "^3.6.0", | |||
"jsdom": "16.x.x", | |||
"karma": "^6.3.14", | |||
"karma-browserstack-launcher": "^1.5.1", | |||
"karma-chrome-launcher": "^3.1.0", | |||
"karma-firefox-launcher": "^2.1.2", | |||
"karma-fixture": "^0.2.6", | |||
"karma-html2js-preprocessor": "^1.0.0", | |||
"karma-json-fixtures-preprocessor": "0.0.6", | |||
"karma-qunit": "^4.1.2", | |||
"karma-rollup-preprocessor": "^5.0.2", | |||
"lodash.sample": "^4.2.1", | |||
"minimist": "^1.2.5", | |||
"npm-run-all": "^4.1.5", | |||
"pre-commit": "^1.2.2", | |||
"prettier": "^2.5.1", | |||
"qunit": "^2.4.1", | |||
"qunit-tap": "^1.5.0", | |||
"rimraf": "^3.0.2", | |||
"rollup": "^0.68.2", | |||
"rollup-plugin-babel": "^3.0.3", | |||
"rollup-plugin-commonjs": "^8.4.1", | |||
"rollup-plugin-includepaths": "^0.2.3", | |||
"rollup-plugin-node-resolve": "^3.4.0", | |||
"rollup-plugin-replace": "^2.2.0", | |||
"rollup-plugin-terser": "^7.0.2", | |||
"xo": "^0.48.0" | |||
}, | |||
"directories": { | |||
"test": "test" | |||
}, | |||
"files": [ | |||
"dist" | |||
], | |||
"homepage": "https://github.com/cure53/DOMPurify", | |||
"keywords": [ | |||
"dom", | |||
"xss", | |||
"html", | |||
"svg", | |||
"mathml", | |||
"security", | |||
"secure", | |||
"sanitizer", | |||
"sanitize", | |||
"filter", | |||
"purify" | |||
], | |||
"license": "(MPL-2.0 OR Apache-2.0)", | |||
"main": "dist/purify.cjs.js", | |||
"module": "dist/purify.es.js", | |||
"name": "dompurify", | |||
"pre-commit": [ | |||
"lint", | |||
"build", | |||
"commit-amend-build" | |||
], | |||
"repository": { | |||
"type": "git", | |||
"url": "git://github.com/cure53/DOMPurify.git" | |||
}, | |||
"resolutions": { | |||
"natives": "1.1.6" | |||
}, | |||
"scripts": { | |||
"build": "cross-env run-p build:umd build:umd:min build:es build:cjs", | |||
"build:cjs": "cross-env NODE_ENV=development BABEL_ENV=rollup rollup -c -f cjs -o dist/purify.cjs.js", | |||
"build:es": "cross-env NODE_ENV=development BABEL_ENV=rollup rollup -c -f es -o dist/purify.es.js", | |||
"build:umd": "cross-env NODE_ENV=development BABEL_ENV=rollup rollup -c -f umd -o dist/purify.js", | |||
"build:umd:min": "cross-env NODE_ENV=production BABEL_ENV=rollup rollup -c -f umd -o dist/purify.min.js", | |||
"commit-amend-build": "scripts/commit-amend-build.sh", | |||
"dev": "cross-env NODE_ENV=development BABEL_ENV=rollup rollup -w -c -o dist/purify.js", | |||
"format": "npm run format:js && npm run format:md", | |||
"format:js": "prettier --write '{src,demos,scripts,test,website}/*.js'", | |||
"format:md": "prettier --write --parser markdown '**/*.md'", | |||
"lint": "xo src/*.js", | |||
"prebuild": "rimraf dist/**", | |||
"test": "cross-env NODE_ENV=test BABEL_ENV=rollup npm run lint && npm run test:jsdom && npm run test:karma -- --browsers Chrome", | |||
"test:ci": "cross-env NODE_ENV=test BABEL_ENV=rollup npm run test:jsdom && npm run test:karma -- --log-level error --reporters dots --single-run --shouldTestOnBrowserStack=\"${TEST_BROWSERSTACK}\" --shouldProbeOnly=\"${TEST_PROBE_ONLY}\"", | |||
"test:jsdom": "cross-env NODE_ENV=test BABEL_ENV=rollup node test/jsdom-node-runner --dot", | |||
"test:karma": "cross-env NODE_ENV=test BABEL_ENV=rollup karma start test/karma.conf.js --log-level warn " | |||
}, | |||
"version": "2.3.6", | |||
"xo": { | |||
"semicolon": true, | |||
"space": 2, | |||
"extends": [ | |||
"prettier" | |||
], | |||
"plugins": [ | |||
"prettier" | |||
], | |||
"rules": { | |||
"import/no-useless-path-segments": 0, | |||
"unicorn/prefer-optional-catch-binding": 0, | |||
"unicorn/prefer-node-remove": 0, | |||
"prettier/prettier": [ | |||
"error", | |||
{ | |||
"trailingComma": "es5", | |||
"singleQuote": true | |||
} | |||
], | |||
"camelcase": [ | |||
"error", | |||
{ | |||
"properties": "never" | |||
} | |||
] | |||
}, | |||
"globals": [ | |||
"window", | |||
"VERSION" | |||
] | |||
} | |||
} |
@ -0,0 +1,21 @@ | |||
MIT License | |||
Copyright (c) 2019 NHN Corp. | |||
Permission is hereby granted, free of charge, to any person obtaining a copy | |||
of this software and associated documentation files (the "Software"), to deal | |||
in the Software without restriction, including without limitation the rights | |||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |||
copies of the Software, and to permit persons to whom the Software is | |||
furnished to do so, subject to the following conditions: | |||
The above copyright notice and this permission notice shall be included in | |||
all copies or substantial portions of the Software. | |||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |||
THE SOFTWARE. |
@ -0,0 +1,323 @@ | |||
#  | |||
> A JavaScript schedule calendar that is full featured. Now your service just got the customizable calendar. | |||
[](https://github.com/nhn/tui.calendar/releases/latest) | |||
[](https://www.npmjs.com/package/tui-calendar) | |||
[](https://github.com/nhn/tui.calendar/blob/master/LICENSE) | |||
[](https://github.com/nhn/tui.project-name/labels/help%20wanted) | |||
[](https://github.com/nhn) | |||
 | |||
## 🚩 Table of Contents | |||
* [Collect statistics on the use of open source](#Collect-statistics-on-the-use-of-open-source) | |||
* [Documents](#-documents) | |||
* [How Cool: Monthly, Weekly, Daily and Various View Types.](#how-cool-monthly-weekly-daily-and-various-view-types) | |||
* [Easy to Use: Dragging and Resizing a Schedule](#easy-to-use-dragging-and-resizing-a-schedule) | |||
* [Ready to Use: Default Popups](#ready-to-use-default-popups) | |||
* [Features](#-features) | |||
* [Examples](#-examples) | |||
* [Install](#-install) | |||
* [Wrappers](#-wrappers) | |||
* [Usage](#-usage) | |||
* [Browser Support](#-browser-support) | |||
* [Pull Request Steps](#-pull-request-steps) | |||
* [Contributing](#-contributing) | |||
* [Dependency](#-dependency) | |||
* [TOAST UI Family](#-toast-ui-family) | |||
* [Used By](#-used-by) | |||
* [License](#-license) | |||
## Collect statistics on the use of open source | |||
TOAST UI Calendar applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Calendar is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. | |||
To disable GA use the [options](https://nhn.github.io/tui.calendar/latest/global.html#Options): | |||
```js | |||
var calendar = new Calendar('#calendar', { | |||
usageStatistics: false | |||
}); | |||
``` | |||
## 📙 Documents | |||
* [Getting Started](https://github.com/nhn/tui.calendar/blob/master/docs/getting-started.md) | |||
* [Tutorials](https://github.com/nhn/tui.calendar/tree/master/docs) | |||
* [APIs](https://nhn.github.io/tui.calendar/latest/Calendar) | |||
You can also see the older versions of API page on the [releases page](https://github.com/nhn/tui.calendar/releases). | |||
## ✨ How Cool: Monthly, Weekly, Daily and Various View Types. | |||
| Monthly | Weekly | | |||
| --- | --- | | |||
|  |  | | |||
| Daily | 2 Weeks | | |||
| --- | --- | | |||
|  |  | | |||
## Easy to Use: Dragging and Resizing a Schedule | |||
| Dragging | Resizing | | |||
| --- | --- | | |||
|  |  | | |||
## Ready to Use: Default Popups | |||
| Creation Popup | Detail Popup | | |||
| --- | --- | | |||
|  |  | | |||
## 🎨 Features | |||
* Supports various view types: daily, weekly, monthly(6 weeks, 2 weeks, 3 weeks) | |||
* Supports efficient management of milestone and task schedules | |||
* Supports the narrow width of weekend | |||
* Supports changing start day of week | |||
* Supports customizing the date and schedule information UI(including a header and a footer of grid cell) | |||
* Supports adjusting a schedule by mouse dragging | |||
* Supports customizing UI by theme | |||
## 🐾 Examples | |||
* [Basic](https://nhn.github.io/tui.calendar/latest/tutorial-example00-basic) : Example of using default options. | |||
## 💾 Install | |||
TOAST UI products can be used by using the package manager or downloading the source directly. | |||
However, we highly recommend using the package manager. | |||
### Via Package Manager | |||
TOAST UI products are registered in two package managers, [npm](https://www.npmjs.com/) and [bower](https://bower.io/). | |||
You can conveniently install it using the commands provided by each package manager. | |||
When using npm, be sure to use it in the environment [Node.js](https://nodejs.org) is installed. | |||
#### npm | |||
``` sh | |||
$ npm install --save tui-calendar # Latest version | |||
$ npm install --save tui-calendar@<version> # Specific version | |||
``` | |||
#### bower | |||
``` sh | |||
$ bower install tui-calendar # Latest version | |||
$ bower install tui-calendar#<tag> # Specific version | |||
``` | |||
### Via Contents Delivery Network (CDN) | |||
TOAST UI products are available over the CDN powered by [NHN Cloud](https://www.toast.com). | |||
You can use the CDN as below. | |||
Insert style sheet files | |||
```html | |||
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" /> | |||
<!-- If you use the default popups, use this. --> | |||
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" /> | |||
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" /> | |||
``` | |||
Insert JavaScript file | |||
```html | |||
<script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script> | |||
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script> | |||
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script> | |||
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script> | |||
``` | |||
If you want to use a specific version, use the tag name instead of `latest` in the url's path. | |||
The CDN directory has the following structure. | |||
``` | |||
tui-calendar/ | |||
├─ latest/ | |||
│ ├─ tui-calendar.js | |||
│ └─ tui-calendar.min.js | |||
│ └─ tui-calendar.css | |||
│ └─ tui-calendar.min.css | |||
├─ v1.0.0/ | |||
│ ├─ ... | |||
``` | |||
### Download Source Files | |||
* [Download bundle files](https://github.com/nhn/tui.calendar/tree/master/dist) | |||
* [Download all sources for each version](https://github.com/nhn/tui.calendar/releases) | |||
## 🛍 Wrappers | |||
* [toast-ui.vue-calendar](https://github.com/nhn/toast-ui.vue-calendar) **Vue** wrapper component is implemented by [NHN](https://github.com/nhn). | |||
* [toast-ui.react-calendar](https://github.com/nhn/toast-ui.react-calendar) **React** wrapper component is powered by [NHN](https://github.com/nhn). | |||
* [ngx-mat-tui-calendar](https://github.com/ron2015schmitt/ngx-mat-tui-calendar) **Angular 12**, **Material Design** wrapper component by [@ron2015schmitt](https://github.com/ron2015schmitt) | |||
* [ngx-tui-dev](https://github.com/brnrds/ngx-tui-dev): **TypeScript** and **Angular 5** wrapper component is being implemented(ref [#82](https://github.com/nhn/tui.calendar/issues/82)) by [@amanvishnani](https://github.com/amanvishnani) and [@brnrds](https://github.com/brnrds). Thanks for their effort. | |||
* [vue-tui-calendar](https://github.com/lkmadushan/vue-tuicalendar): **Vue** wrapper component is being implemented(ref [#81](https://github.com/nhn/tui.calendar/issues/81)) by [@lkmadushan](https://github.com/lkmadushan). Thanks for their effort. | |||
* [tui-calendar-react](https://github.com/IniZio/react-tui-calendar): **React** wrapper component is provided(ref #[134](https://github.com/nhn/tui.calendar/issues/134)) by [@IniZio](https://github.com/IniZio). Thanks for his effort. | |||
* [toast_ui.blazor_calendar](https://github.com/gismofx/toast_ui.blazor_calendar): **C#/Blazor** JSInterop wrapper component is provided(ref #[781](https://github.com/nhn/tui.calendar/issues/781)) by [@gismofx](https://github.com/gismofx) Thanks for his effort. | |||
## 🔨 Usage | |||
### HTML | |||
Place a `<div></div>` where you want TOAST UI Calendar rendered. | |||
```html | |||
<body> | |||
... | |||
<div id="calendar" style="height: 800px;"></div> | |||
... | |||
</body> | |||
``` | |||
### JavaScript | |||
#### Using namespace in browser environment | |||
```javascript | |||
var Calendar = tui.Calendar; | |||
``` | |||
#### Using module format in node environment | |||
```javascript | |||
var Calendar = require('tui-calendar'); /* CommonJS */ | |||
require("tui-calendar/dist/tui-calendar.css"); | |||
// If you use the default popups, use this. | |||
require("tui-date-picker/dist/tui-date-picker.css"); | |||
require("tui-time-picker/dist/tui-time-picker.css"); | |||
``` | |||
```javascript | |||
import Calendar from 'tui-calendar'; /* ES6 */ | |||
import "tui-calendar/dist/tui-calendar.css"; | |||
// If you use the default popups, use this. | |||
import 'tui-date-picker/dist/tui-date-picker.css'; | |||
import 'tui-time-picker/dist/tui-time-picker.css'; | |||
``` | |||
Then you can create a calendar instance with [options](https://nhn.github.io/tui.calendar/latest/Options) to set configuration. | |||
```javascript | |||
var calendar = new Calendar('#calendar', { | |||
defaultView: 'month', | |||
taskView: true, | |||
template: { | |||
monthDayname: function(dayname) { | |||
return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>'; | |||
} | |||
... | |||
} | |||
}); | |||
``` | |||
Or you can use jquery plugin. You must include jquery before using this jquery plugin. | |||
```js | |||
// jquery wrapper | |||
var $calEl = $('#calendar').tuiCalendar({ | |||
defaultView: 'month', | |||
taskView: true, | |||
template: { | |||
monthDayname: function(dayname) { | |||
return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>'; | |||
} | |||
... | |||
} | |||
}); | |||
// You can get calendar instance | |||
var calendarInstance = $calEl.data('tuiCalendar'); | |||
calendarInstance.createSchedules([...]); | |||
``` | |||
## 🌏 Browser Support | |||
| <img src="https://user-images.githubusercontent.com/1215767/34348387-a2e64588-ea4d-11e7-8267-a43365103afe.png" alt="Chrome" width="16px" height="16px" /> Chrome | <img src="https://user-images.githubusercontent.com/1215767/34348590-250b3ca2-ea4f-11e7-9efb-da953359321f.png" alt="IE" width="16px" height="16px" /> Internet Explorer | <img src="https://user-images.githubusercontent.com/1215767/34348380-93e77ae8-ea4d-11e7-8696-9a989ddbbbf5.png" alt="Edge" width="16px" height="16px" /> Edge | <img src="https://user-images.githubusercontent.com/1215767/34348394-a981f892-ea4d-11e7-9156-d128d58386b9.png" alt="Safari" width="16px" height="16px" /> Safari | <img src="https://user-images.githubusercontent.com/1215767/34348383-9e7ed492-ea4d-11e7-910c-03b39d52f496.png" alt="Firefox" width="16px" height="16px" /> Firefox | | |||
| :---------: | :---------: | :---------: | :---------: | :---------: | | |||
| Latest | +9 | Latest | Latest | Latest | | |||
## 🔧 Pull Request Steps | |||
TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. | |||
Run npm scripts and develop yourself with the following process. | |||
### Setup | |||
Fork `develop` branch into your personal repository. | |||
Clone it to local computer. Install node modules. | |||
Before starting development, you should check if there are any errors. | |||
``` sh | |||
$ git clone https://github.com/{owner}/tui.calendar.git | |||
$ cd tui.calendar | |||
$ npm install | |||
$ npm run test | |||
``` | |||
### Develop | |||
Let's start development! | |||
You can see your code reflected as soon as you save the code by running a server. | |||
Don't miss adding test cases and then make green rights. | |||
#### Run webpack-dev-server | |||
``` sh | |||
$ npm run serve | |||
``` | |||
#### Run karma test | |||
``` sh | |||
$ npm run test | |||
``` | |||
### Pull Request | |||
Before uploading your PR, run test one last time to check if there are any errors. | |||
If it has no errors, commit and then push it! | |||
For more information on PR's steps, please see links in the Contributing section. | |||
## 💬 Contributing | |||
* [Code of Conduct](https://github.com/nhn/tui.calendar/blob/master/CODE_OF_CONDUCT.md) | |||
* [Contributing guideline](https://github.com/nhn/tui.calendar/blob/master/CONTRIBUTING.md) | |||
* [Issue guideline](https://github.com/nhn/tui.calendar/blob/master/docs/ISSUE_TEMPLATE.md) | |||
* [Commit convention](https://github.com/nhn/tui.calendar/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md) | |||
## 🔩 Dependency | |||
* [tui-code-snippet](https://github.com/nhn/tui.code-snippet) >= 1.5.0 | |||
* [tui-date-picker](https://github.com/nhn/tui.date-picker) >= 4.3.0 is optional. | |||
* [tui-time-picker](https://github.com/nhn/tui.time-picker) >= 2.1.4 is optional. | |||
## 🍞 TOAST UI Family | |||
* [TOAST UI Grid](https://github.com/nhn/tui.grid) | |||
* [TOAST UI Chart](https://github.com/nhn/tui.chart) | |||
* [TOAST UI Editor](https://github.com/nhn/tui.editor) | |||
* [TOAST UI Image-Editor](https://github.com/nhn/tui.image-editor) | |||
* [TOAST UI Components](https://github.com/nhn?q=tui) | |||
## 🚀 Used By | |||
* [NHN Dooray! - Collaboration Service (Project, Messenger, Mail, Calendar, Drive, Wiki, Contacts)](https://dooray.com) | |||
* [NCP - Commerce Platform](https://www.e-ncp.com/) | |||
* [shopby](https://www.godo.co.kr/shopby/main.gd) | |||
* [payco-shopping](https://shopping.payco.com/) | |||
* [iamTeacher](https://teacher.iamservice.net) | |||
* [linder](https://www.linder.kr) | |||
## 📜 License | |||
This software is licensed under the [MIT](https://github.com/nhn/tui.calendar/blob/master/LICENSE) © [NHN](https://github.com/nhn). |
@ -0,0 +1,357 @@ | |||
// Type definitions for TOAST UI Calendar v1.15.3 | |||
// TypeScript Version: 3.2.1 | |||
export type DateType = string | Date | TZDate; | |||
export type EventHandlerType = IEvents[keyof IEvents]; | |||
export type CustomEventType = keyof IEvents; | |||
export interface IEventObject { | |||
schedule: ISchedule; | |||
changes: ISchedule | null; | |||
end: TZDate; | |||
start: TZDate; | |||
calendar?: ICalendarInfo; | |||
triggerEventName?: 'click' | 'dblclick'; | |||
} | |||
export interface IEventDateObject { | |||
date: string; | |||
} | |||
export interface IEventMoreObject { | |||
date: TZDate; | |||
target: Element; | |||
} | |||
export interface IEventScheduleObject { | |||
calendar: ICalendarInfo; | |||
event: MouseEvent; | |||
schedule: ISchedule; | |||
} | |||
export interface ITimeCreationGuide { | |||
guideElement: HTMLElement; | |||
guideTimeElement: HTMLElement; | |||
clearGuideElement: () => void; | |||
} | |||
export interface IMonthGuide { | |||
guideElements: HTMLElement[]; | |||
clearGuideElements: () => void; | |||
} | |||
export interface IDayGridCreationGuide { | |||
guideElement: HTMLElement; | |||
clearGuideElement: () => void; | |||
} | |||
export interface IEventWithCreationPopup extends Pick<ISchedule, 'start' | 'end' | 'state' | 'title' | 'location'> { | |||
calendarId: string | number | null; | |||
useCreationPopup: true; | |||
isAllDay: boolean; | |||
} | |||
export interface IEventWithoutCreationPopup { | |||
start: TZDate; | |||
end: TZDate; | |||
isAllDay: boolean; | |||
triggerEventName: 'click' | 'dblclick' | 'mouseup'; | |||
/** | |||
* Depending on the position when creating the schedule creation guide. | |||
* | |||
* - `ITimeCreationGuide`: In Week/Day view, trying to create a timely schedule. | |||
* - `IDayGridCreationGuide`: In Week/Day view, trying to create a all-day schedule. | |||
* - `IMonthGuide`: In Month view, trying to create a schedule with a range of days. | |||
*/ | |||
guide: ITimeCreationGuide | IDayGridCreationGuide | IMonthGuide; | |||
} | |||
/** | |||
* Cast `IEventWithCreationPopup` if you enabled the `useCreationPopup` option. | |||
* | |||
* Otherwise use `IEventWithoutCreationPopup`. | |||
* | |||
* You might need to implement and use type guard functions to narrow down the type of the event. | |||
* | |||
* @example | |||
* ``` | |||
* const cal = new Calendar({ | |||
* useCreationPopup: true, | |||
* // ... | |||
* }); | |||
* | |||
* | |||
* function isUsingCreationPopup(event: TEventBeforeCreateSchedule): event is IEventWithCreationPopup { | |||
* return 'useCreationPopup' in event; | |||
* } | |||
* function isMonthViewCreationGuide(guide: IEventWithoutCreationPopup['guide']): guide is IMonthGuide { | |||
* return 'guideElements' in guide; | |||
* } | |||
* | |||
* cal.on('beforeCreateSchedule', e => { | |||
* if (!isUsingCreationPopup(e)) { | |||
* // ... | |||
* if (isMonthViewCreationGuide(e.guide)) { | |||
* e.guide.clearElements(); | |||
* // ... | |||
* } | |||
* } | |||
* }); | |||
* | |||
* // or you can just cast it with `as` keyword. | |||
* cal.on('beforeCreateSchedule', e => { | |||
* const event = e as IEventWithCreationPopup; | |||
* }); | |||
* ``` | |||
*/ | |||
export type TEventBeforeCreateSchedule = IEventWithCreationPopup | IEventWithoutCreationPopup; | |||
export interface IEvents { | |||
'afterRenderSchedule'?: (eventObj: {schedule: ISchedule}) => void; | |||
'beforeCreateSchedule'?: (schedule: TEventBeforeCreateSchedule) => void; | |||
'beforeDeleteSchedule'?: (eventObj: IEventScheduleObject) => void; | |||
'beforeUpdateSchedule'?: (eventObj: IEventObject) => void; | |||
'clickDayname'?: (eventObj: IEventDateObject) => void; | |||
'clickMore'?: (eventObj: IEventMoreObject) => void; | |||
'clickSchedule'?: (eventObj: IEventScheduleObject) => void; | |||
'clickTimezonesCollapseBtn'?: (timezonesCollapsed: boolean) => void; | |||
} | |||
export class TZDate { | |||
public getTime(): number; | |||
public toDate(): Date; | |||
public toUTCString(): string; | |||
} | |||
export interface ICalendarColor { | |||
color?: string; | |||
bgColor?: string; | |||
dragBgColor?: string; | |||
borderColor?: string; | |||
} | |||
export interface ITimeGridHourLabel { | |||
hidden: boolean; | |||
hour: number; | |||
minutes: number; | |||
} | |||
export interface ITimezoneHourMarker { | |||
hourmarker: TZDate; | |||
dateDifferenceSign: string; | |||
dateDifference: number; | |||
} | |||
export interface IGridDateModel { | |||
date: string; | |||
day: number; | |||
hiddenSchedules: number; | |||
isOtherMonth: boolean; | |||
isToday: boolean; | |||
month: number; | |||
ymd: string; | |||
} | |||
export interface IWeekDayNameInfo { | |||
date: number; | |||
day: number; | |||
dayName: string; | |||
isToday: boolean; | |||
renderDate: string; | |||
} | |||
export interface IMonthDayNameInfo { | |||
day: number; | |||
label: string; | |||
} | |||
export interface ITemplateConfig { | |||
milestoneTitle?: () => string; | |||
milestone?: (schedule: ISchedule) => string; | |||
taskTitle?: () => string; | |||
task?: (schedule: ISchedule) => string; | |||
alldayTitle?: () => string; | |||
allday?: (schedule: ISchedule) => string; | |||
time?: (schedule: ISchedule) => string; | |||
goingDuration?: (schedule: ISchedule) => string; | |||
comingDuration?: (schedule: ISchedule) => string; | |||
monthMoreTitleDate?: (date: string, dayname: string) => string; | |||
monthMoreClose?: () => string; | |||
monthGridHeader?: (model: IGridDateModel) => string; | |||
monthGridHeaderExceed?: (hiddenSchedules: number) => string; | |||
monthGridFooter?: (model: IGridDateModel) => string; | |||
monthGridFooterExceed?: (hiddenSchedules: number) => string; | |||
monthDayname?: (model: IMonthDayNameInfo) => string; | |||
weekDayname?: (model: IWeekDayNameInfo) => string; | |||
weekGridFooterExceed?: (hiddenSchedules: number) => string; | |||
dayGridTitle?: (viewName: string) => string; | |||
schedule?: (schedule: ISchedule) => string; | |||
collapseBtnTitle?: () => string; | |||
timezoneDisplayLabel?: (timezoneOffset: number, displayLabel: string) => string; | |||
timegridDisplayPrimayTime?: (time: ITimeGridHourLabel) => string; | |||
timegridDisplayPrimaryTime?: (time: ITimeGridHourLabel) => string; | |||
timegridDisplayTime?: (time: ITimeGridHourLabel) => string; | |||
timegridCurrentTime?: (hourMarker: ITimezoneHourMarker) => string; | |||
popupIsAllDay?: () => string; | |||
popupStateFree?: () => string; | |||
popupStateBusy?: () => string; | |||
titlePlaceholder?: () => string; | |||
locationPlaceholder?: () => string; | |||
startDatePlaceholder?: () => string; | |||
endDatePlaceholder?: () => string; | |||
popupSave?: () => string; | |||
popupUpdate?: () => string; | |||
popupDetailDate?: (isAllDay: boolean, start: DateType, end: DateType) => string; | |||
popupDetailLocation?: (schedule: ISchedule) => string; | |||
popupDetailUser?: (schedule: ISchedule) => string; | |||
popupDetailState?: (schedule: ISchedule) => string; | |||
popupDetailRepeat?: (schedule: ISchedule) => string; | |||
popupDetailBody?: (schedule: ISchedule) => string; | |||
popupEdit?: () => string; | |||
popupDelete?: () => string; | |||
} | |||
export interface IWeekOptions { | |||
startDayOfWeek?: number; | |||
daynames?: string[]; | |||
narrowWeekend?: boolean; | |||
workweek?: boolean; | |||
showTimezoneCollapseButton?: boolean; | |||
timezonesCollapsed?: boolean; | |||
hourStart?: number; | |||
hourEnd?: number; | |||
} | |||
export interface IMonthOptions { | |||
daynames?: string[]; | |||
startDayOfWeek?: number; | |||
narrowWeekend?: boolean; | |||
visibleWeeksCount?: number; | |||
isAlways6Week?: boolean; | |||
workweek?: boolean; | |||
visibleScheduleCount?: number; | |||
moreLayerSize?: { | |||
width?: string | null; | |||
height?: string | null; | |||
}; | |||
grid?: { | |||
header?: { | |||
height?: number; | |||
}, | |||
footer?: { | |||
height?: number; | |||
} | |||
}; | |||
scheduleFilter?: (schedule: ISchedule) => boolean; | |||
} | |||
export interface ISchedule { | |||
id?: string; | |||
calendarId?: string; | |||
title?: string; | |||
body?: string; | |||
start?: DateType; | |||
end?: DateType; | |||
goingDuration?: number; | |||
comingDuration?: number; | |||
isAllDay?: boolean; | |||
category?: string; | |||
dueDateClass?: string; | |||
location?: string; | |||
attendees?: string[]; | |||
recurrenceRule?: string; | |||
isPending?: boolean; | |||
isFocused?: boolean; | |||
isVisible?: boolean; | |||
isReadOnly?: boolean; | |||
isPrivate?: boolean; | |||
color?: string; | |||
bgColor?: string; | |||
dragBgColor?: string; | |||
borderColor?: string; | |||
customStyle?: string; | |||
raw?: { | |||
[propName: string]: string | number | boolean | object | null; | |||
} | |||
state?: string; | |||
} | |||
export interface ITimezone { | |||
timezoneName: string, | |||
displayLabel?: string; | |||
tooltip?: string; | |||
timezoneOffset?: number; | |||
} | |||
export interface ICalendarInfo { | |||
id: string; | |||
name: string; | |||
color?: string; | |||
bgColor?: string; | |||
dragBgColor?: string; | |||
borderColor?: string; | |||
} | |||
export interface ITheme { | |||
[k: string]: string; | |||
} | |||
export interface IOptions { | |||
defaultView?: string; | |||
taskView?: boolean | string[]; | |||
scheduleView?: boolean | string[]; | |||
theme?: ITheme; | |||
template?: ITemplateConfig; | |||
week?: IWeekOptions; | |||
month?: IMonthOptions; | |||
calendars?: ICalendarInfo[]; | |||
useCreationPopup?: boolean; | |||
useDetailPopup?: boolean; | |||
timezones?: ITimezone[]; | |||
timezone?: { | |||
zones: ITimezone[]; | |||
offsetCalculator: (timezoneName: string, timestamp: number) => number; | |||
}; | |||
disableDblClick?: boolean; | |||
disableClick?: boolean; | |||
isReadOnly?: boolean; | |||
usageStatistics?: boolean; | |||
} | |||
export default class Calendar { | |||
public static setTimezoneOffset(offset: number): void; | |||
public static setTimezoneOffsetCallback(callback: (timestamp: number) => void): void; | |||
constructor(container: Element | string, options?: IOptions); | |||
public changeView(newViewName: string, force?: boolean): void; | |||
public clear(immediately?: boolean): void; | |||
public createSchedules(schedules: ISchedule[], silent?: boolean): void; | |||
public deleteSchedule(scheduleId: string, calendarId: string, silent?: boolean): void; | |||
public destroy(): void; | |||
public getDate(): TZDate; | |||
public getDateRangeEnd(): TZDate; | |||
public getDateRangeStart(): TZDate; | |||
public getElement(scheduleId: string, calendarId: string): Element; | |||
public getOptions(): IOptions; | |||
public getSchedule(scheduleId: string, calendarId: string): ISchedule; | |||
public getViewName(): string; | |||
public hideMoreView(): void; | |||
public next(): void; | |||
public openCreationPopup(schedule: ISchedule): void; | |||
public prev(): void; | |||
public render(immediately?: boolean): void; | |||
public scrollToNow(): void; | |||
public setCalendarColor(calendarId: string, option: ICalendarColor, silent?: boolean): void; | |||
public setCalendars(calendars: ICalendarInfo[]): void; | |||
public setDate(date: Date | string): void; | |||
public setOptions(options: IOptions, silent?: boolean): void; | |||
public setTheme(theme: ITheme): string[]; | |||
public today(): void; | |||
public toggleSchedules(calendarId: string, toHide: boolean, render?: boolean): void; | |||
public toggleScheduleView(enabled: boolean): void; | |||
public toggleTaskView(enabled: boolean): void; | |||
public updateSchedule(scheduleId: string, calendarId: string, scheduleData: ISchedule, silent?: boolean): void; | |||
public off(eventName?: string | object | EventHandlerType, handler?: EventHandlerType | string): void; | |||
public on(event: CustomEventType | IEvents, handler?: EventHandlerType): void; | |||
} |
@ -0,0 +1,144 @@ | |||
{ | |||
"_from": "tui-calendar", | |||
"_id": "tui-calendar@1.15.3", | |||
"_inBundle": false, | |||
"_integrity": "sha512-S+QxtSPunLUNIX/eHoHcBB9XlPVT15Wh6ItR62n5K/Gq3WeSQdyhdbsuZJYV9z75bgJbFzp6x32v2yEPm6iWrg==", | |||
"_location": "/tui-calendar", | |||
"_phantomChildren": {}, | |||
"_requested": { | |||
"type": "tag", | |||
"registry": true, | |||
"raw": "tui-calendar", | |||
"name": "tui-calendar", | |||
"escapedName": "tui-calendar", | |||
"rawSpec": "", | |||
"saveSpec": null, | |||
"fetchSpec": "latest" | |||
}, | |||
"_requiredBy": [ | |||
"#USER", | |||
"/" | |||
], | |||
"_resolved": "https://registry.npmjs.org/tui-calendar/-/tui-calendar-1.15.3.tgz", | |||
"_shasum": "99c9809c3575ac55ecf2b5bd5c119e8a6fcd5481", | |||
"_spec": "tui-calendar", | |||
"_where": "/usr/lib/python3/dist-packages/odoo/kalachakra_module/kalachakra/static", | |||
"author": { | |||
"name": "NHN FE Development Lab", | |||
"email": "dl_javascript@nhn.com" | |||
}, | |||
"bugs": { | |||
"url": "https://github.com/nhn/tui.calendar/issues" | |||
}, | |||
"bundleDependencies": false, | |||
"dependencies": { | |||
"dompurify": "^2.3.1", | |||
"tui-code-snippet": "^1.5.0", | |||
"tui-date-picker": "^4.3.0", | |||
"tui-time-picker": "^2.1.4" | |||
}, | |||
"deprecated": false, | |||
"description": "TOAST UI Calendar", | |||
"devDependencies": { | |||
"@formatjs/intl": "^1.4.8", | |||
"@formatjs/intl-datetimeformat": "^3.0.0", | |||
"@formatjs/intl-getcanonicallocales": "^1.5.1", | |||
"@formatjs/intl-locale": "^2.4.11", | |||
"@formatjs/intl-numberformat": "^6.1.1", | |||
"@formatjs/intl-pluralrules": "^4.0.1", | |||
"css-loader": "^3.2.0", | |||
"es6-set": "^0.1.5", | |||
"eslint": "^4.19.1", | |||
"eslint-config-tui": "^1.0.3", | |||
"eslint-loader": "^2.0.0", | |||
"eslint-plugin-jasmine": "^2.10.1", | |||
"eslint-plugin-prettier": "^3.1.4", | |||
"got": "^11.8.2", | |||
"handlebars": "^4.7.6", | |||
"handlebars-template-loader": "^1.0.0", | |||
"istanbul-instrumenter-loader": "^3.0.1", | |||
"jasmine-core": "^2.99.1", | |||
"jsdoc": "^3.5.5", | |||
"karma": "^6.3.14", | |||
"karma-chrome-launcher": "^2.2.0", | |||
"karma-cli": "^2.0.0", | |||
"karma-coverage": "^2.0.3", | |||
"karma-fixture": "^0.2.6", | |||
"karma-html2js-preprocessor": "^1.1.0", | |||
"karma-jasmine": "^1.1.2", | |||
"karma-jasmine-ajax": "^0.1.13", | |||
"karma-jasmine-jquery-2": "^0.1.1", | |||
"karma-json-fixtures-preprocessor": "0.0.6", | |||
"karma-junit-reporter": "^1.2.0", | |||
"karma-preprocess-preprocessor": "^0.2.0", | |||
"karma-sauce-launcher": "^1.2.0", | |||
"karma-source-map-support": "^1.3.0", | |||
"karma-sourcemap-loader": "^0.3.7", | |||
"karma-spec-reporter": "0.0.32", | |||
"karma-webdriver-launcher": "git+https://github.com/nhn/karma-webdriver-launcher.git#v1.2.0", | |||
"karma-webpack": "^4.0.2", | |||
"mini-css-extract-plugin": "^0.4.0", | |||
"optimize-css-assets-webpack-plugin": "^5.0.3", | |||
"preprocess-loader": "^0.3.0", | |||
"prettier": "^2.1.2", | |||
"safe-umd-webpack-plugin": "^4.0.0", | |||
"stylus": "^0.54.5", | |||
"stylus-loader": "^3.0.2", | |||
"terser-webpack-plugin": "^2.3.5", | |||
"tslint": "^5.12.0", | |||
"tui-jsdoc-template": "^1.2.2", | |||
"tui-release-notes": "git+https://github.com/nhn/toast-ui.release-notes.git#v1.0.1", | |||
"typescript": "^3.2.1", | |||
"url-loader": "^1.0.1", | |||
"weakmap-polyfill": "^2.0.2", | |||
"webpack": "^4.13.0", | |||
"webpack-cli": "^3.0.8", | |||
"webpack-dev-server": "^3.11.0" | |||
}, | |||
"files": [ | |||
"src", | |||
"dist", | |||
"index.d.ts" | |||
], | |||
"homepage": "https://github.com/nhn/tui.calendar#readme", | |||
"keywords": [ | |||
"nhn", | |||
"nhnent", | |||
"toast", | |||
"tui", | |||
"component", | |||
"calendar", | |||
"fullcalendar", | |||
"daily", | |||
"weekly", | |||
"monthly", | |||
"business week", | |||
"milestone", | |||
"task", | |||
"allday", | |||
"jquery-plugin" | |||
], | |||
"license": "MIT", | |||
"main": "dist/tui-calendar.js", | |||
"name": "tui-calendar", | |||
"repository": { | |||
"type": "git", | |||
"url": "git+https://github.com/nhn/tui.calendar.git" | |||
}, | |||
"scripts": { | |||
"bundle": "webpack --mode development && NODE_ENV=production webpack --mode production && node tsBannerGenerator.js", | |||
"cpy-dist2doc": "mkdir -p doc/dist && cp -f -r dist doc", | |||
"doc": "tuidoc", | |||
"doc:serve": "tuidoc --serv", | |||
"eslint": "eslint ./src", | |||
"publish:cdn": "node scripts/publishToCDN.js", | |||
"release-note": "tuie", | |||
"serve": "webpack-dev-server --mode development --progress --inline --hot", | |||
"test": "karma start --no-single-run", | |||
"test:ne": "KARMA_SERVER=ne karma start", | |||
"test:types": "tsc --project test/types", | |||
"tslint": "tslint index.d.ts" | |||
}, | |||
"types": "index.d.ts", | |||
"version": "1.15.3" | |||
} |
@ -0,0 +1,66 @@ | |||
+prefix-classes(css-prefix) | |||
.layout | |||
height: 100% | |||
position: relative | |||
box-sizing: border-box | |||
* | |||
box-sizing: border-box | |||
// Related with user interaction | |||
.dragging | |||
cursor: move | |||
.resizing | |||
cursor: row-resize | |||
.resizing-x | |||
cursor: col-resize | |||
.hidden | |||
display: none !important | |||
.invisible span | |||
visibility: hidden | |||
.clear | |||
clearfix() | |||
.scroll-y | |||
overflow-y: scroll | |||
.dot | |||
display: inline-block | |||
position: relative | |||
top: -1px | |||
content: '' | |||
width: 7px | |||
height: 7px | |||
border-radius: 50% | |||
.{css-prefix}holiday | |||
color: red | |||
.{css-prefix}today | |||
background: rgba(218, 229, 249, .3) | |||
// Drag handle | |||
.handle-x | |||
background-position: center center | |||
background-repeat: no-repeat | |||
background-image: url(./image/handle-x.png) | |||
.handle-y | |||
background-position: center center | |||
background-repeat: no-repeat | |||
background-image: url(./image/handle-y.png) | |||
// For Retina display | |||
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) | |||
.handle-x | |||
background-image: url(./image/handle-x@2x.png) | |||
background-size: 8px 4px | |||
.handle-y | |||
background-image: url(./image/handle-y@2x.png) | |||
background-size: 4px 8px |
@ -0,0 +1,56 @@ | |||
/* icon styles */ | |||
.{css-prefix}icon { | |||
width: 14px; | |||
height: 14px; | |||
display: inline-block; | |||
vertical-align: middle; | |||
} | |||
.{css-prefix}icon.{css-prefix}ic-title | |||
background: url('image/ic-subject.png') no-repeat | |||
.{css-prefix}icon.{css-prefix}ic-location | |||
background: url('image/ic-location.png') no-repeat | |||
.{css-prefix}icon.{css-prefix}ic-date | |||
background: url('image/ic-date.png') no-repeat | |||
.{css-prefix}icon.{css-prefix}ic-state | |||
background: url('image/ic-state.png') no-repeat | |||
.{css-prefix}icon.{css-prefix}ic-private | |||
background: url('image/ic-lock.png') no-repeat | |||
.{css-prefix}icon.{css-prefix}ic-close | |||
background: url('image/ic-close.png') no-repeat | |||
.{css-prefix}ic-location-b | |||
background: url('./image/ic-location-b.png') | |||
.{css-prefix}ic-state-b | |||
background: url('./image/ic-state-b.png') | |||
.{css-prefix}icon.{css-prefix}ic-user-b | |||
background-image: url('./image/ic-user-b.png') | |||
.{css-prefix}icon.{css-prefix}ic-edit | |||
background-image: url('./image/ic-edit.png') | |||
.{css-prefix}icon.{css-prefix}ic-delete | |||
background-image: url('./image/ic-delete.png') | |||
.{css-prefix}icon.{css-prefix}ic-arrow-solid-top | |||
background: url('image/ic-arrow-solid-top.png') no-repeat | |||
.{css-prefix}icon.{css-prefix}ic-milestone | |||
background: url('image/ic-milestone.png') no-repeat | |||
.{css-prefix}icon.{css-prefix}ic-arrow-left | |||
background: url('image/ic-arrow-left.png') no-repeat | |||
.{css-prefix}icon.{css-prefix}ic-arrow-right | |||
background: url('image/ic-arrow-right.png') no-repeat | |||
.{css-prefix}ic-repeat-b | |||
background: url('./image/ic-repeat-b.png') |
@ -0,0 +1,21 @@ | |||
@import "variables.styl" | |||
@import "common.styl" | |||
@import "weekday.styl" | |||
// Week view styles | |||
@import "week/layout.styl" | |||
@import "week/dayname.styl" | |||
@import "week/daygrid.styl" | |||
@import "week/time.styl" | |||
// Month view styles | |||
@import "month.styl" | |||
// Layout styles | |||
@import "vlayout.styl" | |||
// Popup view styles | |||
@import "popup.styl" | |||
// for icons | |||
@import "icons.styl" |
@ -0,0 +1,106 @@ | |||
.{css-prefix}month | |||
height: 100% | |||
min-height: 600px | |||
+prefix-classes(month) | |||
.dayname | |||
width: 100% | |||
position: absolute | |||
font-size: 13px | |||
.dayname-item | |||
height: 100% | |||
font-weight: bold | |||
.week-item | |||
position: relative | |||
&>div | |||
height: 100% | |||
.more | |||
height: inherit | |||
min-width: 280px | |||
min-height: 150px | |||
.more-title | |||
position: relative | |||
.more-title-day | |||
font-size: 23px | |||
color #333 | |||
.more-title-day-label | |||
font-size: 12px | |||
color: #333 | |||
.more-close | |||
position: absolute | |||
right: 0 | |||
outline: 0 | |||
background none | |||
border: 0 | |||
font-size: 14px | |||
line-height: 28px | |||
padding: 0 7px | |||
cursor: pointer | |||
.more-list | |||
overflow-y: auto | |||
.more-schedule | |||
cursor: pointer | |||
display: block | |||
overflow: hidden | |||
white-space: nowrap | |||
text-overflow: ellipsis | |||
font-size: 12px | |||
.guide-block | |||
position: absolute | |||
.weekday-schedule | |||
margin-top: 2px | |||
.creation-guide | |||
top: 0 | |||
bottom: -1px | |||
left: -1px | |||
right: 0 | |||
position: absolute | |||
z-index: 20 | |||
.guide-focused | |||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2) | |||
.guide | |||
position: relative | |||
padding-left: 3px | |||
line-height: 18px | |||
overflow: hidden | |||
white-space: nowrap | |||
text-overflow: ellipsis | |||
.guide-cover | |||
width: 100% | |||
position: absolute | |||
top: -50% | |||
left: -50% | |||
background-color: rgba(0, 0, 0, 0.2) | |||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1) | |||
.exceed-left .guide | |||
margin-left: 0px | |||
.exceed-right .guide | |||
margin-right: 0px | |||
.exceed-right .guide-handle | |||
display: none | |||
.guide-handle | |||
position: absolute | |||
top: 0 | |||
right: 3px | |||
width: 6px | |||
background-position: 3px center | |||
cursor: col-resize |
@ -0,0 +1,60 @@ | |||
// Monthweek view | |||
+prefix-classes(monthweek) | |||
.container, | |||
.grid, | |||
.grid-line | |||
height: 100% | |||
min-height: inherit; | |||
.container | |||
position: relative | |||
.grid-line | |||
position: absolute | |||
margin-left: -1px | |||
border-left: 1px solid #ccc | |||
padding: 30px | |||
font-size: 12px | |||
&.near-month-day | |||
color: #ff8383 | |||
.schedules | |||
pos(0px, 0px) | |||
wh(100%, 100%) | |||
position: absolute | |||
.schedule-block | |||
position: absolute | |||
.schedule | |||
position: relative | |||
margin: 0 3px 0 2px | |||
.schedule span | |||
padding-left: 3px | |||
line-height: 18px | |||
font-size: 12px | |||
.schedule-title | |||
display: block | |||
white-space: nowrap | |||
overflow: hidden | |||
text-overflow: ellipsis | |||
margin-right: 10px | |||
.exceed-left .schedule | |||
margin-left: 0px | |||
.exceed-right .schedule | |||
margin-right: 0px | |||
.exceed-right .resize-handle | |||
display: none | |||
.resize-handle | |||
position: absolute | |||
top: 2px | |||
right: 0 | |||
width: 6px | |||
background-position: 3px center | |||
cursor: col-resize |
@ -0,0 +1,457 @@ | |||
.{css-prefix}popup | |||
position: absolute | |||
font-weight: 2.5 | |||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1) | |||
clear: both | |||
.{css-prefix}popup-container | |||
min-width: 474px | |||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1) | |||
background-color: #ffffff | |||
border: solid 1px #d5d5d5 | |||
padding: 17px | |||
border-radius: 2px | |||
.{css-prefix}popup-section | |||
font-size: 0 | |||
min-height: 40px | |||
.{css-prefix}section-calendar | |||
width: 176px | |||
.{css-prefix}section-calendar.{css-prefix}hide | |||
height: 21px | |||
visibility: hidden | |||
.{css-prefix}section-title | |||
width: calc(100% - 36px) | |||
padding-right: 4px | |||
.{css-prefix}section-title input | |||
width: 365px | |||
.{css-prefix}button.{css-prefix}section-private | |||
height: 32px | |||
padding: 8px | |||
font-size: 0 | |||
margin-left: 4px | |||
.{css-prefix}section-private.{css-prefix}public .{css-prefix}ic-private | |||
background: url('image/ic-unlock.png') no-repeat | |||
.{css-prefix}section-start-date | |||
.{css-prefix}section-end-date | |||
width: 176px | |||
input | |||
width: 139px | |||
&:hover | |||
&:focus | |||
.{css-prefix}popup-section-item | |||
.tui-datepicker | |||
border-color: #bbbbbb | |||
.{css-prefix}popup-section-item:focus | |||
border-color: #bbbbbb | |||
.{css-prefix}section-date-dash | |||
font-size: 12px | |||
color: #d5d5d5 | |||
height: 32px | |||
padding: 0 4px | |||
vertical-align: middle | |||
.{css-prefix}popup-section-item | |||
&.{css-prefix}section-allday | |||
border: none | |||
padding: 0 0 0 8px | |||
cursor: pointer | |||
&.{css-prefix}section-location | |||
display: block | |||
input | |||
width: 400px | |||
.{css-prefix}section-allday .{css-prefix}icon.{css-prefix}ic-checkbox | |||
margin: 0 | |||
.{css-prefix}popup-section-item.{css-prefix}section-allday .{css-prefix}content | |||
padding-left: 4px | |||
.{css-prefix}section-state | |||
width: 109px | |||
.{css-prefix}section-state .{css-prefix}content | |||
width: 58px | |||
text-overflow: ellipsis | |||
overflow: hidden | |||
.{css-prefix}popup-section-item | |||
height: 32px | |||
padding: 0 9px 0 12px | |||
border: 1px solid #d5d5d5 | |||
display: inline-block | |||
font-size: 0 | |||
border-radius: 2px | |||
.{css-prefix}popup-section-item:hover | |||
border-color: #bbbbbb | |||
.{css-prefix}popup-section-item:focus | |||
border-color: #bbbbbb | |||
.{css-prefix}popup-section-item .{css-prefix}icon | |||
position: relative | |||
.{css-prefix}popup-section-item .{css-prefix}content | |||
text-align: left | |||
display: inline-block | |||
font-size: 12px | |||
vertical-align: middle | |||
position: relative | |||
padding-left: 8px | |||
.{css-prefix}section-calendar .{css-prefix}dropdown-button .{css-prefix}content | |||
width: 125px | |||
text-overflow: ellipsis | |||
overflow: hidden | |||
top: -1px | |||
.{css-prefix}popup-section-item input | |||
border: none | |||
height: 30px | |||
outline: none | |||
display: inline-block | |||
.{css-prefix}popup-section-item input::placeholder | |||
color: #bbbbbb | |||
font-weight: 300 | |||
.{css-prefix}dropdown | |||
position: relative | |||
.{css-prefix}dropdown:hover .{css-prefix}dropdown-button | |||
border: 1px solid #bbbbbb | |||
.{css-prefix}dropdown-button.{css-prefix}popup-section-item | |||
height: 32px | |||
font-size: 0 | |||
top: -1px | |||
.{css-prefix}dropdown-arrow | |||
background: url('image/ic-arrow-solid-bottom.png') no-repeat | |||
.dropdown.open | |||
.{css-prefix}open | |||
.{css-prefix}dropdown-arrow | |||
background: url('image/ic-arrow-solid-top.png') no-repeat | |||
.{css-prefix}dropdown-menu | |||
position: absolute | |||
top: 31px | |||
padding: 4px 0 | |||
background-color: #ffffff | |||
border: 1px solid #d5d5d5 | |||
border-top: none | |||
border-radius: 0 0 2px 2px | |||
width: 100% | |||
display: none | |||
.{css-prefix}dropdown:hover .{css-prefix}dropdown-menu | |||
border: 1px solid #bbbbbb | |||
border-top: none | |||
.{css-prefix}open .{css-prefix}dropdown-menu | |||
display: block | |||
.{css-prefix}dropdown-menu-item | |||
height: 30px | |||
border: none | |||
cursor: pointer | |||
.{css-prefix}section-calendar .{css-prefix}dropdown-menu-item | |||
width: 100%; | |||
.{css-prefix}section-state .{css-prefix}dropdown-menu-item | |||
width: 100%; | |||
.{css-prefix}dropdown-menu-item:hover | |||
background-color: rgba(81, 92, 230, 0.05) | |||
.{css-prefix}dropdown-menu-item .{css-prefix}content | |||
line-height: 30px | |||
.{css-prefix}button.{css-prefix}popup-close | |||
position: absolute | |||
top: 10px | |||
right: 10px | |||
background-color: #ffffff | |||
padding: 2px | |||
border: none | |||
.{css-prefix}section-button-save | |||
height: 36px | |||
.{css-prefix}popup-save | |||
float: right | |||
.{css-prefix}popup-arrow-border, .{css-prefix}popup-arrow-fill | |||
position: absolute | |||
.{css-prefix}arrow-top .{css-prefix}popup-arrow-border | |||
border-top: none | |||
border-right: 8px solid transparent | |||
border-bottom: 8px solid #d5d5d5 | |||
border-left: 8px solid transparent | |||
left: calc(50% - 8px) | |||
top: -7px | |||
.{css-prefix}arrow-right .{css-prefix}popup-arrow-border | |||
border-top: 8px solid transparent | |||
border-right: none | |||
border-bottom: 8px solid transparent | |||
border-left: 8px solid #d5d5d5 | |||
top: calc(50% - 8px) | |||
right: -7px | |||
.{css-prefix}arrow-bottom .{css-prefix}popup-arrow-border | |||
border-top: 8px solid #d5d5d5 | |||
border-right: 8px solid transparent | |||
border-bottom: none | |||
border-left: 8px solid transparent | |||
left: calc(50% - 8px) | |||
bottom: -7px | |||
.{css-prefix}arrow-left .{css-prefix}popup-arrow-border | |||
border-top: 8px solid transparent | |||
border-right: 8px solid #d5d5d5 | |||
border-bottom: 8px solid transparent | |||
border-left: none | |||
top: calc(50% - 8px) | |||
left: -7px | |||
.{css-prefix}arrow-top .{css-prefix}popup-arrow-fill | |||
border-top: none | |||
border-right: 7px solid transparent | |||
border-bottom: 7px solid #ffffff | |||
border-left: 7px solid transparent | |||
left: -7px | |||
top: 1px | |||
.{css-prefix}arrow-right .{css-prefix}popup-arrow-fill | |||
border-top: 7px solid transparent | |||
border-right: none | |||
border-bottom: 7px solid transparent | |||
border-left: 7px solid #ffffff | |||
top: -7px | |||
right: 1px | |||
.{css-prefix}arrow-bottom .{css-prefix}popup-arrow-fill | |||
border-top: 7px solid #ffffff | |||
border-right: 7px solid transparent | |||
border-bottom: none | |||
border-left: 7px solid transparent | |||
left: -7px | |||
bottom: 1px | |||
.{css-prefix}arrow-left .{css-prefix}popup-arrow-fill | |||
border-top: 7px solid transparent | |||
border-right: 7px solid #ffffff | |||
border-bottom: 7px solid transparent | |||
border-left: none | |||
top: -7px | |||
left: 1px | |||
.{css-prefix}button | |||
background: #ffffff | |||
border: 1px solid #d5d5d5 | |||
border-radius: 2px | |||
text-align: center | |||
outline: none | |||
font-size: 12px | |||
cursor: pointer | |||
color: #333 | |||
&:hover | |||
border-color: #bbbbbb | |||
color: #333333 | |||
.{css-prefix}button:active | |||
background: #f9f9f9 | |||
color: #333333 | |||
.{css-prefix}button .round | |||
border-radius: 25px | |||
.{css-prefix}confirm | |||
width: 96px | |||
height: 36px | |||
border-radius: 40px | |||
background-color: #ff6618 | |||
font-size: 12px | |||
font-weight: bold | |||
color: #ffffff | |||
border: none | |||
.{css-prefix}confirm:hover | |||
background-color: #e55b15 | |||
color: #ffffff | |||
.{css-prefix}confirm:active | |||
background-color: #d95614 | |||
color: #ffffff | |||
/* icon styles */ | |||
.{css-prefix}icon.{css-prefix}right | |||
float: right | |||
top: 1px | |||
.{css-prefix}icon .{css-prefix}none | |||
display: none | |||
.{css-prefix}icon.{css-prefix}calendar-dot | |||
border-radius: 8px; | |||
width: 12px; | |||
height: 12px; | |||
margin: 1px; | |||
input[type='checkbox'].{css-prefix}checkbox-square | |||
display: none | |||
input[type='checkbox'].{css-prefix}checkbox-square + span | |||
display: inline-block | |||
cursor: pointer | |||
line-height: 14px | |||
margin-right: 8px | |||
width: 14px | |||
height: 14px | |||
background: url('image/ic-checkbox-normal.png') no-repeat | |||
vertical-align: middle | |||
input[type='checkbox'].{css-prefix}checkbox-square:checked + span { | |||
background: url('image/ic-checkbox-checked.png') no-repeat; | |||
} | |||
input[type='checkbox'].{css-prefix}checkbox-round | |||
display: none | |||
input[type='checkbox'].{css-prefix}checkbox-round + span | |||
display: inline-block | |||
cursor: pointer | |||
width: 14px | |||
height: 14px | |||
line-height: 14px | |||
vertical-align: middle | |||
margin-right: 8px | |||
border-radius: 8px | |||
border: solid 2px | |||
background: transparent | |||
.{css-prefix}popup-top-line | |||
position: absolute | |||
border-radius: 2px 2px 0 0 | |||
width: 100% | |||
height: 4px | |||
border: none | |||
top: 0 | |||
.{css-prefix}popup-detail .{css-prefix}popup-container | |||
width: 301px | |||
min-width: 301px | |||
padding-bottom: 0 | |||
.{css-prefix}popup-detail .{css-prefix}icon | |||
width: 12px | |||
height: 12px | |||
background-size: 12px | |||
position: relative | |||
margin-right: 8px | |||
.{css-prefix}popup-detail .{css-prefix}icon.{css-prefix}ic-location-b | |||
top: -2px | |||
.{css-prefix}popup-detail .{css-prefix}icon.{css-prefix}ic-user-b | |||
top: -2px | |||
.{css-prefix}popup-detail .{css-prefix}icon.{css-prefix}ic-state-b | |||
top: -1px | |||
.{css-prefix}popup-detail .{css-prefix}icon.{css-prefix}calendar-dot | |||
width: 10px | |||
height: 10px | |||
margin-right: 8px | |||
top: -1px | |||
.{css-prefix}popup-detail .{css-prefix}content | |||
line-height: 24px | |||
height: 24px | |||
font-size: 12px | |||
line-height: 2 | |||
.{css-prefix}popup-detail .{css-prefix}section-header | |||
margin-bottom: 6px | |||
.{css-prefix}popup-detail .{css-prefix}popup-detail-item-separate | |||
margin-top: 4px | |||
.{css-prefix}popup-detail .{css-prefix}popup-detail-item-indent | |||
text-indent: -20px | |||
padding-left: 20px | |||
.{css-prefix}popup-detail .{css-prefix}schedule-title | |||
font-size: 15px | |||
font-weight: bold | |||
line-height: 1.6 | |||
word-break: break-all | |||
.{css-prefix}popup-detail .{css-prefix}schedule-private | |||
display: none | |||
width: 16px | |||
height: 16px | |||
background: url('image/ic-lock.png') no-repeat 16px | |||
.{css-prefix}popup-detail .{css-prefix}schedule-private .{css-prefix}ic-private | |||
display: block | |||
.{css-prefix}popup-detail .{css-prefix}section-detail | |||
margin-bottom: 16px | |||
.{css-prefix}popup-detail .{css-prefix}section-button | |||
border-top: 1px solid #e5e5e5 | |||
font-size: 0 | |||
.{css-prefix}section-button .{css-prefix}icon | |||
margin-right: 4px | |||
top: -3px | |||
.{css-prefix}section-button .{css-prefix}content | |||
position: relative | |||
top: 2px | |||
.{css-prefix}popup-edit, .{css-prefix}popup-delete | |||
display: inline-block | |||
padding: 7px 9px 11px 9px | |||
width: calc(50% - 1px) | |||
outline: none | |||
background: none | |||
border: none | |||
cursor: pointer | |||
.{css-prefix}popup-vertical-line | |||
background: #e5e5e5 | |||
width: 1px | |||
height: 14px | |||
vertical-align: middle | |||
display: inline-block | |||
margin-top: -7px | |||
/* override tui-date-picker */ | |||
.tui-datepicker | |||
left: -12px | |||
z-index: 1 | |||
border-color: #d5d5d5 |
@ -0,0 +1,30 @@ | |||
// Variables | |||
// default prefix | |||
css-prefix = 'tui-full-calendar-' | |||
// Dayname | |||
dayname = css-prefix + 'dayname-' | |||
weekday = css-prefix + 'weekday-' | |||
// DayGrid | |||
daygrid = css-prefix + 'daygrid-' | |||
// Time | |||
timegrid = css-prefix + 'timegrid-' | |||
time = css-prefix + 'time-' | |||
// Month | |||
month = css-prefix + 'month-' | |||
// Functions | |||
wh(w, h) | |||
width: w | |||
height: h | |||
pos(top, left) | |||
top: top | |||
left: left | |||
clearfix() | |||
&:after | |||
content: ''; | |||
display: block; | |||
clear: both; | |||
@ -0,0 +1,20 @@ | |||
+prefix-classes(css-prefix) | |||
.vlayout-container | |||
position: relative | |||
.splitter | |||
clear: left | |||
cursor: row-resize | |||
&:hover | |||
border-color: #999 | |||
.splitter-focused | |||
background-color: #ddd | |||
border: none | |||
.splitter-guide | |||
position: absolute | |||
wh(100%, 3px) | |||
border: none | |||
background-color: #e8e8e8 |
@ -0,0 +1,16 @@ | |||
// DayGrid view | |||
+prefix-classes(daygrid) | |||
.layout | |||
height: 100%; | |||
.{css-prefix}daygrid-layout | |||
.{css-prefix}right | |||
overflow-y: hidden | |||
// Guide element | |||
+prefix-classes(daygrid + guide-) | |||
.creation-block | |||
position: absolute | |||
top: 0 | |||
bottom: 0 | |||
z-index: 1 |
@ -0,0 +1,23 @@ | |||
.{css-prefix}dayname | |||
position: absolute | |||
margin-left: -1px | |||
height: 100% | |||
overflow: hidden | |||
&.{css-prefix}today | |||
font-weight: bold | |||
+prefix-classes(dayname) | |||
.container | |||
overflow-y: scroll | |||
.leftmargin | |||
position: relative | |||
height: 100% | |||
.date | |||
font-size: 26px | |||
.name | |||
font-weight: bold | |||
font-size: 12px |
@ -0,0 +1,9 @@ | |||
.{css-prefix}week-container | |||
width: 100% | |||
height: inherit | |||
display: inline-block | |||
font-size: 10px | |||
min-height: 600px | |||
.{css-prefix}today | |||
background: none |
@ -0,0 +1,198 @@ | |||
+prefix-classes(timegrid) | |||
.container | |||
height: 100% | |||
position: relative | |||
overflow: hidden | |||
overflow-y: scroll | |||
.container-split | |||
height: 100% | |||
position: relative | |||
overflow: hidden | |||
.left | |||
position: absolute | |||
.hour | |||
position: relative | |||
color: #555 | |||
box-sizing: border-box | |||
&:first-child span | |||
display: none | |||
&:last-child | |||
border-bottom: none | |||
.hour span | |||
position: absolute | |||
top: -11px | |||
left: 0 | |||
right: 5px | |||
text-align: right | |||
line-height: 25px | |||
.right | |||
position: relative | |||
.gridline | |||
border-bottom: 1px solid #eee | |||
box-sizing: border-box | |||
&:last-child | |||
border-bottom: none | |||
.schedules | |||
position: absolute | |||
wh(100%, 100%) | |||
pos(0, 0) | |||
cursor: pointer | |||
// Hourmarker | |||
.hourmarker | |||
position: absolute | |||
width: 100% | |||
display: table | |||
.hourmarker-line-left | |||
position: absolute | |||
min-height: 1px | |||
left: 0 | |||
.hourmarker-line-today | |||
position: absolute | |||
min-height: 1px | |||
.hourmarker-line-right | |||
position: absolute | |||
min-height: 1px | |||
right: 0 | |||
.hourmarker-time | |||
padding-right: 5px | |||
line-height: 12px | |||
text-align: right | |||
display: table-cell | |||
vertical-align: bottom | |||
// Todaymarker | |||
.todaymarker | |||
position: absolute | |||
text-indent: -9999px | |||
wh(9px, 9px) | |||
background-color: #135de6 | |||
margin: -4px 0 0 -5px | |||
border-radius: 50% | |||
.sticky-container | |||
position: absolute | |||
top: 0 | |||
.timezone-label-container | |||
position: absolute | |||
.timezone-label-cell | |||
display: table | |||
.timezone-label | |||
display: table-cell | |||
vertical-align: middle | |||
padding-right: 5px | |||
text-align: right | |||
.timezone-close-btn | |||
cursor: pointer | |||
position: absolute | |||
text-align: center | |||
background-color: #ffffff | |||
.{css-prefix}timegrid-timezone-close-btn | |||
.{css-prefix}icon | |||
width: 5px | |||
height: 10px | |||
+prefix-classes(time) | |||
.date | |||
position: absolute | |||
height: 100% | |||
margin-left: -1px | |||
box-sizing: content-box | |||
&:last-child | |||
border-right: none | |||
margin: 0 | |||
// last creation guide element | |||
.schedule, | |||
.guide-creation | |||
left: 0px | |||
.date-schedule-block-wrap | |||
position: relative | |||
height: 100% | |||
.date-schedule-block | |||
position: absolute | |||
right: 0px | |||
.date-schedule-block-pending | |||
opacity: 0.7 | |||
.date-schedule-block-dragging-dim | |||
opacity: 0.3 | |||
.date-schedule-block-focused | |||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2) | |||
.date-schedule-block-cover | |||
position: absolute | |||
top: 0 | |||
width: 100% | |||
height: 100% | |||
background-color: rgba(0, 0, 0, 0.2) | |||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1); | |||
.schedule | |||
position: relative | |||
left: 1px | |||
height: 100% | |||
overflow: hidden | |||
font-size: 12px | |||
font-weight: bold | |||
.schedule-content | |||
overflow: hidden | |||
border-left-width: 3px | |||
border-left-style: solid | |||
padding: 1px 0 0 3px | |||
.schedule-content-travel-time | |||
font-weight: normal; | |||
font-size: 11px; | |||
.resize-handle | |||
position: absolute | |||
right: 0px | |||
bottom: 0px | |||
left: 0px | |||
height: 5px | |||
text-align: center | |||
color: #fff | |||
cursor: row-resize | |||
background-position: center top | |||
// Guide element | |||
.guide-creation | |||
position: absolute | |||
right: 10px | |||
left: 1px | |||
padding: 3px | |||
.guide-move, | |||
.guide-resize | |||
.schedule, | |||
.resize-handle | |||
opacity: 0.8 | |||
z-index: 97 | |||
.guide-creation-label | |||
cursor: default | |||
.guide-bottom | |||
position: absolute | |||
bottom: 3px |