@syncfusion/ej2-calendars 25.2.5 → 25.2.7-30676

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (380) hide show
  1. package/CHANGELOG.md +1220 -1218
  2. package/README.md +178 -178
  3. package/dist/ej2-calendars.umd.min.js +1 -10
  4. package/dist/ej2-calendars.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-calendars.es2015.js +35 -32
  6. package/dist/es6/ej2-calendars.es2015.js.map +1 -1
  7. package/dist/es6/ej2-calendars.es5.js +110 -107
  8. package/dist/es6/ej2-calendars.es5.js.map +1 -1
  9. package/helpers/e2e/calendarHelper.js +13 -13
  10. package/helpers/e2e/datepickerHelper.js +13 -13
  11. package/helpers/e2e/daterangepickerHelper.js +13 -13
  12. package/helpers/e2e/datetimepickerHelper.js +13 -13
  13. package/helpers/e2e/index.js +3 -3
  14. package/helpers/e2e/timepickerHelper.js +13 -13
  15. package/license +10 -10
  16. package/package.json +85 -85
  17. package/src/calendar/calendar-model.d.ts +277 -277
  18. package/src/calendar/calendar.d.ts +20 -20
  19. package/src/calendar/calendar.js +25 -25
  20. package/src/common/maskplaceholder-model.d.ts +36 -36
  21. package/src/common/maskplaceholder.js +19 -19
  22. package/src/datepicker/datepicker-model.d.ts +289 -289
  23. package/src/datepicker/datepicker.d.ts +10 -10
  24. package/src/datepicker/datepicker.js +23 -23
  25. package/src/daterangepicker/daterangepicker-model.d.ts +427 -427
  26. package/src/daterangepicker/daterangepicker.d.ts +2 -2
  27. package/src/daterangepicker/daterangepicker.js +24 -21
  28. package/src/datetimepicker/datetimepicker-model.d.ts +453 -453
  29. package/src/datetimepicker/datetimepicker.d.ts +1 -1
  30. package/src/datetimepicker/datetimepicker.js +20 -20
  31. package/src/timepicker/timepicker-model.d.ts +350 -350
  32. package/src/timepicker/timepicker.d.ts +5 -5
  33. package/src/timepicker/timepicker.js +21 -21
  34. package/styles/bootstrap-dark.css +190 -984
  35. package/styles/bootstrap-dark.scss +20 -5
  36. package/styles/bootstrap.css +190 -985
  37. package/styles/bootstrap.scss +20 -5
  38. package/styles/bootstrap4.css +190 -992
  39. package/styles/bootstrap4.scss +20 -5
  40. package/styles/bootstrap5-dark.css +191 -1014
  41. package/styles/bootstrap5-dark.scss +20 -5
  42. package/styles/bootstrap5.css +191 -1014
  43. package/styles/bootstrap5.scss +20 -5
  44. package/styles/calendar/_all.scss +2 -2
  45. package/styles/calendar/_bds-definition.scss +273 -272
  46. package/styles/calendar/_bigger.scss +1142 -0
  47. package/styles/calendar/_bootstrap-dark-definition.scss +238 -238
  48. package/styles/calendar/_bootstrap-definition.scss +238 -238
  49. package/styles/calendar/_bootstrap4-definition.scss +238 -238
  50. package/styles/calendar/_bootstrap5-definition.scss +258 -258
  51. package/styles/calendar/_bootstrap5.3-definition.scss +260 -0
  52. package/styles/calendar/_fabric-dark-definition.scss +202 -202
  53. package/styles/calendar/_fabric-definition.scss +200 -200
  54. package/styles/calendar/_fluent-definition.scss +264 -262
  55. package/styles/calendar/_fluent2-definition.scss +294 -0
  56. package/styles/calendar/_fusionnew-definition.scss +260 -260
  57. package/styles/calendar/_highcontrast-definition.scss +199 -199
  58. package/styles/calendar/_highcontrast-light-definition.scss +202 -202
  59. package/styles/calendar/_layout.scss +565 -789
  60. package/styles/calendar/_material-dark-definition.scss +204 -204
  61. package/styles/calendar/_material-definition.scss +199 -199
  62. package/styles/calendar/_material3-definition.scss +196 -205
  63. package/styles/calendar/_tailwind-definition.scss +271 -271
  64. package/styles/calendar/_tailwind4-definition.scss +260 -0
  65. package/styles/calendar/_theme.scss +643 -555
  66. package/styles/calendar/bootstrap-dark.css +97 -375
  67. package/styles/calendar/bootstrap.css +97 -375
  68. package/styles/calendar/bootstrap4.css +97 -375
  69. package/styles/calendar/bootstrap5-dark.css +98 -396
  70. package/styles/calendar/bootstrap5.css +98 -396
  71. package/styles/calendar/fabric-dark.css +98 -377
  72. package/styles/calendar/fabric.css +99 -379
  73. package/styles/calendar/fluent-dark.css +116 -424
  74. package/styles/calendar/fluent.css +116 -424
  75. package/styles/calendar/fluent2.css +1747 -0
  76. package/styles/calendar/fluent2.scss +5 -0
  77. package/styles/calendar/highcontrast-light.css +97 -375
  78. package/styles/calendar/highcontrast.css +99 -379
  79. package/styles/calendar/icons/_bds.scss +13 -13
  80. package/styles/calendar/icons/_bootstrap-dark.scss +13 -13
  81. package/styles/calendar/icons/_bootstrap.scss +13 -13
  82. package/styles/calendar/icons/_bootstrap4.scss +13 -13
  83. package/styles/calendar/icons/_bootstrap5.3.scss +13 -0
  84. package/styles/calendar/icons/_bootstrap5.scss +13 -13
  85. package/styles/calendar/icons/_fabric-dark.scss +13 -13
  86. package/styles/calendar/icons/_fabric.scss +13 -13
  87. package/styles/calendar/icons/_fluent.scss +13 -13
  88. package/styles/calendar/icons/_fluent2.scss +13 -0
  89. package/styles/calendar/icons/_fusionnew.scss +13 -13
  90. package/styles/calendar/icons/_highcontrast-light.scss +13 -13
  91. package/styles/calendar/icons/_highcontrast.scss +13 -13
  92. package/styles/calendar/icons/_material-dark.scss +13 -13
  93. package/styles/calendar/icons/_material.scss +13 -13
  94. package/styles/calendar/icons/_material3.scss +13 -13
  95. package/styles/calendar/icons/_tailwind.scss +13 -13
  96. package/styles/calendar/icons/_tailwind4.scss +13 -0
  97. package/styles/calendar/material-dark.css +99 -379
  98. package/styles/calendar/material.css +99 -379
  99. package/styles/calendar/material3-dark.css +100 -380
  100. package/styles/calendar/material3-dark.scss +1 -1
  101. package/styles/calendar/material3.css +100 -380
  102. package/styles/calendar/material3.scss +1 -1
  103. package/styles/calendar/tailwind-dark.css +100 -428
  104. package/styles/calendar/tailwind.css +100 -428
  105. package/styles/datepicker/_all.scss +2 -2
  106. package/styles/datepicker/_bds-definition.scss +105 -105
  107. package/styles/datepicker/_bigger.scss +82 -0
  108. package/styles/datepicker/_bootstrap-dark-definition.scss +97 -97
  109. package/styles/datepicker/_bootstrap-definition.scss +96 -96
  110. package/styles/datepicker/_bootstrap4-definition.scss +101 -101
  111. package/styles/datepicker/_bootstrap5-definition.scss +107 -107
  112. package/styles/datepicker/_bootstrap5.3-definition.scss +108 -0
  113. package/styles/datepicker/_fabric-dark-definition.scss +98 -98
  114. package/styles/datepicker/_fabric-definition.scss +95 -95
  115. package/styles/datepicker/_fluent-definition.scss +107 -107
  116. package/styles/datepicker/_fluent2-definition.scss +118 -0
  117. package/styles/datepicker/_fusionnew-definition.scss +107 -107
  118. package/styles/datepicker/_highcontrast-definition.scss +96 -96
  119. package/styles/datepicker/_highcontrast-light-definition.scss +99 -99
  120. package/styles/datepicker/_layout.scss +459 -433
  121. package/styles/datepicker/_material-dark-definition.scss +103 -103
  122. package/styles/datepicker/_material-definition.scss +100 -100
  123. package/styles/datepicker/_material3-definition.scss +97 -116
  124. package/styles/datepicker/_tailwind-definition.scss +105 -105
  125. package/styles/datepicker/_tailwind4-definition.scss +108 -0
  126. package/styles/datepicker/_theme.scss +48 -53
  127. package/styles/datepicker/bootstrap-dark.css +2 -43
  128. package/styles/datepicker/bootstrap.css +2 -43
  129. package/styles/datepicker/bootstrap4.css +2 -45
  130. package/styles/datepicker/bootstrap5-dark.css +2 -45
  131. package/styles/datepicker/bootstrap5.css +2 -45
  132. package/styles/datepicker/fabric-dark.css +2 -43
  133. package/styles/datepicker/fabric.css +2 -43
  134. package/styles/datepicker/fluent-dark.css +2 -45
  135. package/styles/datepicker/fluent.css +2 -45
  136. package/styles/datepicker/fluent2.css +1617 -0
  137. package/styles/datepicker/fluent2.scss +7 -0
  138. package/styles/datepicker/highcontrast-light.css +2 -43
  139. package/styles/datepicker/highcontrast.css +2 -43
  140. package/styles/datepicker/icons/_bds.scss +52 -76
  141. package/styles/datepicker/icons/_bootstrap-dark.scss +49 -73
  142. package/styles/datepicker/icons/_bootstrap.scss +50 -72
  143. package/styles/datepicker/icons/_bootstrap4.scss +52 -76
  144. package/styles/datepicker/icons/_bootstrap5.3.scss +52 -0
  145. package/styles/datepicker/icons/_bootstrap5.scss +52 -76
  146. package/styles/datepicker/icons/_fabric-dark.scss +43 -65
  147. package/styles/datepicker/icons/_fabric.scss +43 -65
  148. package/styles/datepicker/icons/_fluent.scss +52 -76
  149. package/styles/datepicker/icons/_fluent2.scss +52 -0
  150. package/styles/datepicker/icons/_fusionnew.scss +52 -76
  151. package/styles/datepicker/icons/_highcontrast-light.scss +50 -72
  152. package/styles/datepicker/icons/_highcontrast.scss +50 -72
  153. package/styles/datepicker/icons/_material-dark.scss +59 -99
  154. package/styles/datepicker/icons/_material.scss +59 -99
  155. package/styles/datepicker/icons/_material3.scss +50 -79
  156. package/styles/datepicker/icons/_tailwind.scss +52 -76
  157. package/styles/datepicker/icons/_tailwind4.scss +52 -0
  158. package/styles/datepicker/material-dark.css +2 -60
  159. package/styles/datepicker/material.css +2 -60
  160. package/styles/datepicker/material3-dark.css +4 -52
  161. package/styles/datepicker/material3-dark.scss +1 -1
  162. package/styles/datepicker/material3.css +4 -52
  163. package/styles/datepicker/material3.scss +1 -1
  164. package/styles/datepicker/tailwind-dark.css +2 -50
  165. package/styles/datepicker/tailwind.css +2 -50
  166. package/styles/daterangepicker/_all.scss +2 -2
  167. package/styles/daterangepicker/_bds-definition.scss +294 -294
  168. package/styles/daterangepicker/_bigger.scss +971 -0
  169. package/styles/daterangepicker/_bootstrap-dark-definition.scss +258 -258
  170. package/styles/daterangepicker/_bootstrap-definition.scss +258 -258
  171. package/styles/daterangepicker/_bootstrap4-definition.scss +268 -268
  172. package/styles/daterangepicker/_bootstrap5-definition.scss +296 -296
  173. package/styles/daterangepicker/_bootstrap5.3-definition.scss +298 -0
  174. package/styles/daterangepicker/_fabric-dark-definition.scss +261 -261
  175. package/styles/daterangepicker/_fabric-definition.scss +258 -258
  176. package/styles/daterangepicker/_fluent-definition.scss +313 -322
  177. package/styles/daterangepicker/_fluent2-definition.scss +305 -0
  178. package/styles/daterangepicker/_fusionnew-definition.scss +295 -295
  179. package/styles/daterangepicker/_highcontrast-definition.scss +258 -258
  180. package/styles/daterangepicker/_highcontrast-light-definition.scss +261 -261
  181. package/styles/daterangepicker/_layout.scss +790 -1030
  182. package/styles/daterangepicker/_material-dark-definition.scss +266 -266
  183. package/styles/daterangepicker/_material-definition.scss +266 -266
  184. package/styles/daterangepicker/_material3-definition.scss +262 -282
  185. package/styles/daterangepicker/_tailwind-definition.scss +287 -287
  186. package/styles/daterangepicker/_tailwind4-definition.scss +298 -0
  187. package/styles/daterangepicker/_theme.scss +415 -455
  188. package/styles/daterangepicker/bootstrap-dark.css +67 -479
  189. package/styles/daterangepicker/bootstrap.css +67 -478
  190. package/styles/daterangepicker/bootstrap4.css +67 -483
  191. package/styles/daterangepicker/bootstrap5-dark.css +67 -483
  192. package/styles/daterangepicker/bootstrap5.css +67 -483
  193. package/styles/daterangepicker/fabric-dark.css +67 -473
  194. package/styles/daterangepicker/fabric.css +67 -473
  195. package/styles/daterangepicker/fluent-dark.css +66 -502
  196. package/styles/daterangepicker/fluent.css +66 -502
  197. package/styles/daterangepicker/fluent2.css +1998 -0
  198. package/styles/daterangepicker/fluent2.scss +7 -0
  199. package/styles/daterangepicker/highcontrast-light.css +67 -473
  200. package/styles/daterangepicker/highcontrast.css +67 -473
  201. package/styles/daterangepicker/icons/_bds.scss +74 -92
  202. package/styles/daterangepicker/icons/_bootstrap-dark.scss +61 -85
  203. package/styles/daterangepicker/icons/_bootstrap.scss +69 -85
  204. package/styles/daterangepicker/icons/_bootstrap4.scss +75 -94
  205. package/styles/daterangepicker/icons/_bootstrap5.3.scss +74 -0
  206. package/styles/daterangepicker/icons/_bootstrap5.scss +74 -92
  207. package/styles/daterangepicker/icons/_fabric-dark.scss +69 -85
  208. package/styles/daterangepicker/icons/_fabric.scss +69 -85
  209. package/styles/daterangepicker/icons/_fluent.scss +74 -92
  210. package/styles/daterangepicker/icons/_fluent2.scss +91 -0
  211. package/styles/daterangepicker/icons/_fusionnew.scss +74 -92
  212. package/styles/daterangepicker/icons/_highcontrast-light.scss +69 -85
  213. package/styles/daterangepicker/icons/_highcontrast.scss +69 -85
  214. package/styles/daterangepicker/icons/_material-dark.scss +85 -119
  215. package/styles/daterangepicker/icons/_material.scss +85 -119
  216. package/styles/daterangepicker/icons/_material3.scss +90 -129
  217. package/styles/daterangepicker/icons/_tailwind.scss +74 -92
  218. package/styles/daterangepicker/icons/_tailwind4.scss +74 -0
  219. package/styles/daterangepicker/material-dark.css +67 -490
  220. package/styles/daterangepicker/material.css +67 -495
  221. package/styles/daterangepicker/material3-dark.css +70 -504
  222. package/styles/daterangepicker/material3-dark.scss +1 -1
  223. package/styles/daterangepicker/material3.css +70 -504
  224. package/styles/daterangepicker/material3.scss +1 -1
  225. package/styles/daterangepicker/tailwind-dark.css +66 -478
  226. package/styles/daterangepicker/tailwind.css +66 -478
  227. package/styles/datetimepicker/_all.scss +2 -2
  228. package/styles/datetimepicker/_bds-definition.scss +65 -65
  229. package/styles/datetimepicker/_bigger.scss +105 -0
  230. package/styles/datetimepicker/_bootstrap-dark-definition.scss +60 -60
  231. package/styles/datetimepicker/_bootstrap-definition.scss +59 -59
  232. package/styles/datetimepicker/_bootstrap4-definition.scss +65 -65
  233. package/styles/datetimepicker/_bootstrap5-definition.scss +65 -65
  234. package/styles/datetimepicker/_bootstrap5.3-definition.scss +65 -0
  235. package/styles/datetimepicker/_fabric-dark-definition.scss +60 -60
  236. package/styles/datetimepicker/_fabric-definition.scss +57 -57
  237. package/styles/datetimepicker/_fluent-definition.scss +65 -65
  238. package/styles/datetimepicker/_fluent2-definition.scss +65 -0
  239. package/styles/datetimepicker/_fusionnew-definition.scss +65 -65
  240. package/styles/datetimepicker/_highcontrast-definition.scss +57 -57
  241. package/styles/datetimepicker/_highcontrast-light-definition.scss +60 -60
  242. package/styles/datetimepicker/_layout.scss +179 -238
  243. package/styles/datetimepicker/_material-dark-definition.scss +64 -64
  244. package/styles/datetimepicker/_material-definition.scss +62 -62
  245. package/styles/datetimepicker/_material3-definition.scss +61 -71
  246. package/styles/datetimepicker/_tailwind-definition.scss +65 -65
  247. package/styles/datetimepicker/_tailwind4-definition.scss +65 -0
  248. package/styles/datetimepicker/_theme.scss +70 -70
  249. package/styles/datetimepicker/bootstrap-dark.css +23 -42
  250. package/styles/datetimepicker/bootstrap.css +23 -42
  251. package/styles/datetimepicker/bootstrap4.css +23 -42
  252. package/styles/datetimepicker/bootstrap5-dark.css +23 -42
  253. package/styles/datetimepicker/bootstrap5.css +23 -42
  254. package/styles/datetimepicker/fabric-dark.css +23 -42
  255. package/styles/datetimepicker/fabric.css +23 -42
  256. package/styles/datetimepicker/fluent-dark.css +23 -42
  257. package/styles/datetimepicker/fluent.css +23 -42
  258. package/styles/datetimepicker/fluent2.css +1373 -0
  259. package/styles/datetimepicker/fluent2.scss +8 -0
  260. package/styles/datetimepicker/highcontrast-light.css +23 -42
  261. package/styles/datetimepicker/highcontrast.css +23 -42
  262. package/styles/datetimepicker/icons/_bds.scss +11 -11
  263. package/styles/datetimepicker/icons/_bootstrap-dark.scss +11 -11
  264. package/styles/datetimepicker/icons/_bootstrap.scss +11 -11
  265. package/styles/datetimepicker/icons/_bootstrap4.scss +11 -11
  266. package/styles/datetimepicker/icons/_bootstrap5.3.scss +11 -0
  267. package/styles/datetimepicker/icons/_bootstrap5.scss +11 -11
  268. package/styles/datetimepicker/icons/_fabric-dark.scss +11 -11
  269. package/styles/datetimepicker/icons/_fabric.scss +11 -11
  270. package/styles/datetimepicker/icons/_fluent.scss +11 -11
  271. package/styles/datetimepicker/icons/_fluent2.scss +11 -0
  272. package/styles/datetimepicker/icons/_fusionnew.scss +11 -11
  273. package/styles/datetimepicker/icons/_highcontrast-light.scss +11 -11
  274. package/styles/datetimepicker/icons/_highcontrast.scss +11 -11
  275. package/styles/datetimepicker/icons/_material-dark.scss +31 -53
  276. package/styles/datetimepicker/icons/_material.scss +40 -62
  277. package/styles/datetimepicker/icons/_material3.scss +11 -11
  278. package/styles/datetimepicker/icons/_tailwind.scss +11 -11
  279. package/styles/datetimepicker/icons/_tailwind4.scss +11 -0
  280. package/styles/datetimepicker/material-dark.css +23 -66
  281. package/styles/datetimepicker/material.css +23 -66
  282. package/styles/datetimepicker/material3-dark.css +24 -54
  283. package/styles/datetimepicker/material3-dark.scss +1 -1
  284. package/styles/datetimepicker/material3.css +24 -54
  285. package/styles/datetimepicker/material3.scss +1 -1
  286. package/styles/datetimepicker/tailwind-dark.css +23 -42
  287. package/styles/datetimepicker/tailwind.css +23 -42
  288. package/styles/fabric-dark.css +191 -980
  289. package/styles/fabric-dark.scss +20 -5
  290. package/styles/fabric.css +192 -984
  291. package/styles/fabric.scss +20 -5
  292. package/styles/fluent-dark.css +208 -1061
  293. package/styles/fluent-dark.scss +20 -5
  294. package/styles/fluent.css +208 -1061
  295. package/styles/fluent.scss +20 -5
  296. package/styles/fluent2.css +3549 -0
  297. package/styles/fluent2.scss +20 -0
  298. package/styles/highcontrast-light.css +190 -978
  299. package/styles/highcontrast-light.scss +20 -5
  300. package/styles/highcontrast.css +192 -984
  301. package/styles/highcontrast.scss +20 -5
  302. package/styles/material-dark.css +192 -1075
  303. package/styles/material-dark.scss +20 -5
  304. package/styles/material.css +192 -1106
  305. package/styles/material.scss +20 -5
  306. package/styles/material3-dark.css +194 -1083
  307. package/styles/material3-dark.scss +20 -5
  308. package/styles/material3.css +194 -1083
  309. package/styles/material3.scss +20 -5
  310. package/styles/tailwind-dark.css +192 -1046
  311. package/styles/tailwind-dark.scss +20 -5
  312. package/styles/tailwind.css +192 -1046
  313. package/styles/tailwind.scss +20 -5
  314. package/styles/timepicker/_all.scss +2 -2
  315. package/styles/timepicker/_bds-definition.scss +84 -84
  316. package/styles/timepicker/_bigger.scss +92 -0
  317. package/styles/timepicker/_bootstrap-dark-definition.scss +80 -80
  318. package/styles/timepicker/_bootstrap-definition.scss +77 -77
  319. package/styles/timepicker/_bootstrap4-definition.scss +85 -85
  320. package/styles/timepicker/_bootstrap5-definition.scss +86 -86
  321. package/styles/timepicker/_bootstrap5.3-definition.scss +85 -0
  322. package/styles/timepicker/_fabric-dark-definition.scss +80 -80
  323. package/styles/timepicker/_fabric-definition.scss +77 -77
  324. package/styles/timepicker/_fluent-definition.scss +86 -86
  325. package/styles/timepicker/_fluent2-definition.scss +84 -0
  326. package/styles/timepicker/_fusionnew-definition.scss +86 -86
  327. package/styles/timepicker/_highcontrast-definition.scss +77 -77
  328. package/styles/timepicker/_highcontrast-light-definition.scss +80 -80
  329. package/styles/timepicker/_layout.scss +227 -303
  330. package/styles/timepicker/_material-dark-definition.scss +84 -84
  331. package/styles/timepicker/_material-definition.scss +81 -81
  332. package/styles/timepicker/_material3-definition.scss +83 -99
  333. package/styles/timepicker/_tailwind-definition.scss +84 -84
  334. package/styles/timepicker/_tailwind4-definition.scss +86 -0
  335. package/styles/timepicker/_theme.scss +109 -114
  336. package/styles/timepicker/bootstrap-dark.css +1 -42
  337. package/styles/timepicker/bootstrap.css +1 -42
  338. package/styles/timepicker/bootstrap4.css +1 -42
  339. package/styles/timepicker/bootstrap5-dark.css +1 -42
  340. package/styles/timepicker/bootstrap5.css +1 -42
  341. package/styles/timepicker/fabric-dark.css +1 -42
  342. package/styles/timepicker/fabric.css +1 -42
  343. package/styles/timepicker/fluent-dark.css +1 -42
  344. package/styles/timepicker/fluent.css +1 -42
  345. package/styles/timepicker/fluent2.css +1470 -0
  346. package/styles/timepicker/fluent2.scss +6 -0
  347. package/styles/timepicker/highcontrast-light.css +1 -42
  348. package/styles/timepicker/highcontrast.css +1 -42
  349. package/styles/timepicker/icons/_bds.scss +24 -24
  350. package/styles/timepicker/icons/_bootstrap-dark.scss +23 -23
  351. package/styles/timepicker/icons/_bootstrap.scss +24 -24
  352. package/styles/timepicker/icons/_bootstrap4.scss +24 -24
  353. package/styles/timepicker/icons/_bootstrap5.3.scss +24 -0
  354. package/styles/timepicker/icons/_bootstrap5.scss +24 -24
  355. package/styles/timepicker/icons/_fabric-dark.scss +24 -24
  356. package/styles/timepicker/icons/_fabric.scss +24 -24
  357. package/styles/timepicker/icons/_fluent.scss +24 -24
  358. package/styles/timepicker/icons/_fluent2.scss +24 -0
  359. package/styles/timepicker/icons/_fusionnew.scss +24 -24
  360. package/styles/timepicker/icons/_highcontrast-light.scss +24 -24
  361. package/styles/timepicker/icons/_highcontrast.scss +24 -24
  362. package/styles/timepicker/icons/_material-dark.scss +37 -52
  363. package/styles/timepicker/icons/_material.scss +39 -54
  364. package/styles/timepicker/icons/_material3.scss +24 -24
  365. package/styles/timepicker/icons/_tailwind.scss +24 -24
  366. package/styles/timepicker/icons/_tailwind4.scss +24 -0
  367. package/styles/timepicker/material-dark.css +1 -59
  368. package/styles/timepicker/material.css +1 -59
  369. package/styles/timepicker/material3-dark.css +2 -51
  370. package/styles/timepicker/material3-dark.scss +1 -1
  371. package/styles/timepicker/material3.css +2 -51
  372. package/styles/timepicker/material3.scss +1 -1
  373. package/styles/timepicker/tailwind-dark.css +1 -42
  374. package/styles/timepicker/tailwind.css +1 -42
  375. package/.eslintrc.json +0 -260
  376. package/dist/ej2-calendars.min.js +0 -10
  377. package/dist/global/ej2-calendars.min.js +0 -11
  378. package/dist/global/ej2-calendars.min.js.map +0 -1
  379. package/dist/global/index.d.ts +0 -14
  380. package/tslint.json +0 -111
package/README.md CHANGED
@@ -1,178 +1,178 @@
1
- # JavaScript Calendars Controls
2
-
3
- The [JavaScript Calendars](https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) package contains date and time components such as calendar, date picker, date range picker, date time picker, and time picker. These components come with options to disable dates, restrict selection, and show custom events.
4
-
5
- ## What's Included in the JavaScript Calendars Package
6
-
7
- The [JavaScript Calendars](https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) package includes the following list of components.
8
-
9
- ### JavaScript Calendar
10
-
11
- The [JavaScript Calendar](https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) control is a graphical user interface component that displays a Gregorian or Islamic Calendar and allows selection of a date.
12
-
13
- <p align="center">
14
- <a href="https://ej2.syncfusion.com/documentation/calendar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
15
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/calendar/default.html">Online demos</a> .
16
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
17
- </p>
18
-
19
- <p align="center">
20
- <img alt="JavaScript Calendar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-calendar.png">
21
- </p>
22
-
23
- #### Key features
24
-
25
- * [Date range](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=calendar#/material/calendar/date-range.html) - Restricts the range of dates that can be selected by using the `min` and `max` properties.
26
- * [Customization](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=calendar#/material/calendar/special-dates.html) - Allows complete control over the appearance of the calendar component.
27
- * [Month or year selection](https://ej2.syncfusion.com/documentation/calendar/calendar-views?lang=typescript#calendar-views) - Provides a flexible option to select only a month or year as the date value.
28
- * [First day of week](https://ej2.syncfusion.com/documentation/calendar/how-to.html?lang=typescript#change-the-first-day-of-the-week) - Changes the first day of all weeks in every month.
29
- * [Week number](https://ej2.syncfusion.com/documentation/calendar/how-to/render-the-calendar-with-week-numbers?lang=typescript#render-the-calendar-with-week-numbers) - Displays the week number of the selected date in the calendar by enabling the week number option.
30
- * [Disabled dates](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=calendar#/material/calendar/disabled.html) - Disables any date to prevent the user from selecting that date.
31
- * [Start and depth view](https://ej2.syncfusion.com/documentation/calendar/calendar-views?lang=typescript#view-restriction) - Calendar has `month`, `year`, and `decade` views that provide flexibility to select dates.
32
- * [Highlight weekends](https://ej2.syncfusion.com/documentation/calendar/customization?lang=typescript#highlight-weekends) - The calendar supports to highlighting every weekend in a month.
33
- * [Globalization](https://ej2.syncfusion.com/documentation/calendar/globalization?lang=typescript#calendar) - Supports globalization (internationalization and localization) to translate the names of months, days, and the today button text to any supported language.
34
-
35
- ### JavaScript DatePicker
36
-
37
- The [JavaScript DatePicker](https://www.syncfusion.com/javascript-ui-controls/js-datepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) component is a graphical user interface component that allows selection or entry of a date value.
38
-
39
- <p align="center">
40
- <a href="https://ej2.syncfusion.com/documentation/datepicker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
41
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/datepicker/default.html">Online demos</a> .
42
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-datepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
43
- </p>
44
-
45
- <p align="center">
46
- <img alt="JavaScript DatePicker Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-datepicker.png">
47
- </p>
48
-
49
- #### Key features
50
-
51
- * [Placeholders](https://ej2.syncfusion.com/documentation/datepicker/how-to/set-the-placeholder/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendars-npm) - Placeholder is a hint text that is displayed in the DatePicker; it is used to indicate the format of the date that the user should enter, such as mm/dd/yyyy or dd/mm/yyyy.
52
- * [Mask date input](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendars-npm/#/material/datepicker/input-mask.html) - The mask date input restricts the user from typing unwanted characters in the text input, allowing only eligible date format to be typed.
53
- * [Disabled date](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendars-npm/#/material/datepicker/disabled.html) - To disable a specific date in the picker calendar and restrict it from being set or selected in the DatePicker.
54
- * [Date format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=datepicker#/material/datepicker/date-format.html) - The DatePicker control’s input value can be custom formatted apart from the default culture’s specific date format.
55
- * [Incomplete date validation](https://ej2.syncfusion.com/documentation/datepicker/strict-mode?utm_source=npm&utm_campaign=datepicker) - The strictMode is an act that allows entry only of valid dates within the specified min or max range in a text box.
56
- * [Globalization](https://ej2.syncfusion.com/documentation/calendar/globalization?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendars-npm/#calendar) - Support globalization (also known as internationalization and localization) to allow you to translate the names of months, days, and other text elements in the calendar to any supported language. This can be useful in cases where you want to display the calendar in a language other than the default language.
57
-
58
- ### JavaScript TimePicker
59
-
60
- The [JavaScript TimePicker](https://www.syncfusion.com/javascript-ui-controls/js-timepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) component is a simple and intuitive interface component that allows selection of a time value from the popup list or setting a desired time value.
61
-
62
- <p align="center">
63
- <a href="https://ej2.syncfusion.com/documentation/timepicker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
64
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/timepicker/default.html">Online demos</a> .
65
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-timepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
66
- </p>
67
-
68
- <p align="center">
69
- <img alt="JavaScript TimePicker Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-timepicker.png">
70
- </p>
71
-
72
- #### Key features
73
-
74
- * [Time range](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/time-range.html) - Restricts the entry or selection of time values within a specific range of time by using `min` and `max` properties.
75
- * [Time format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/time-format.html) - Apart from the default culture specific time format, the time picker control’s input value can also be custom formatted.
76
- * [Strict mode](https://ej2.syncfusion.com/documentation/timepicker/strict-mode?lang=typescript#timepicker) - The strictMode is an act that allows entry of only valid time values within the specified min and max range in a text box.
77
- * [Disabled time](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/list-formatting.html) - Any number of time values can be disabled in the popup list items to prevent selection of those times.
78
- * [Time intervals](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/list-formatting.html) - Allows populating the time list with intervals between the times in the popup list to enable selection of proper time value.
79
- * [Customization](https://ej2.syncfusion.com/documentation/timepicker/how-to/css-customization?lang=typescript#css-customization) - The appearance of the time picker can be customized completely.
80
- * [Time list with duration](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/list-formatting.html) - Supports customization of the control’s popup list items with time duration.
81
- * [Mask time input](https://ej2.syncfusion.com/demos/#/bootstrap5/timepicker/input-mask.html) - The mask time input restricts the user from typing unwanted characters in the text input, allowing only eligible time format to be typed.
82
- * [Globalization](https://ej2.syncfusion.com/documentation/timepicker/globalization?lang=typescript#timepicker) - Supports globalization (internationalization and localization) to update time popup list values to match any specified culture.
83
-
84
- ### JavaScript DateTimePicker
85
-
86
- The [JavaScript DateTimePicker](https://www.syncfusion.com/javascript-ui-controls/js-datetime-picker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) component is a graphical user interface component that allows an end user to enter or select a date and time values from a pop-up calendar and time list pop-up.
87
-
88
- <p align="center">
89
- <a href="https://ej2.syncfusion.com/documentation/datetimepicker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
90
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/datetimepicker/default.html">Online demos</a> .
91
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-datetime-picker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
92
- </p>
93
-
94
- <p align="center">
95
- <img alt="JavaScript DateTimePicker Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-datetimepicker.png">
96
- </p>
97
-
98
- #### Key features
99
-
100
- * [Date time range](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=datetimepicker#/material/datetimepicker/date-time-range.html) - Restricts the entry or selection of values within a specific range of dates and times by using `min` and `max` properties.
101
- * [Date time format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=datetimepicker#/material/datetimepicker/date-time-format.html) - The control’s input value can be custom formatted apart from the default culture’s specific date time format.
102
- * [Mask date time input](https://ej2.syncfusion.com/demos/#/bootstrap5/datetimepicker/input-mask.html) - The mask date time input restricts the user from typing unwanted characters in the text input, allowing only eligible date and time format to be typed.
103
-
104
- ### JavaScript DateRangePicker
105
-
106
- The [JavaScript DateRangePicker](https://www.syncfusion.com/javascript-ui-controls/js-daterangepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) component is a graphical user interface control that allows an end user to select start and end date values as a range from a calendar pop-up or by entering the value directly in the input element.
107
-
108
- <p align="center">
109
- <a href="https://ej2.syncfusion.com/documentation/daterangepicker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
110
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/daterangepicker/default.html">Online demos</a> .
111
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-daterangepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
112
- </p>
113
-
114
- <p align="center">
115
- <img alt="JavaScript DateRangePicker Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-daterangepicker.png">
116
- </p>
117
-
118
- #### Key features
119
-
120
- * [Preset ranges](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=daterangepicker#/material/daterangepicker/presets.html) - Defines the preset ranges to select the frequently used date range by the end users.
121
- * [Range restriction](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=daterangepicker#/material/daterangepicker/date-range.html) - This control restricts the entry or selection of values within a specific range of date by defining the min and max properties.
122
- * [Limit the selection range](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=daterangepicker#/material/daterangepicker/day-span.html) - Directs the end user to select only the date range with specific minimum and maximum number of days’ count by setting the minDays and maxDays options.
123
- * [First day of week](https://ej2.syncfusion.com/documentation/daterangepicker/customization?lang=typescript#first-day-of-week) - Changes the first day of weeks in every month.
124
- * [Strict mode](https://ej2.syncfusion.com/documentation/daterangepicker/range-restriction?lang=typescript#strict-mode) - The strictMode is an act that allows entry only of a valid date within the specified min and max range in a textbox.
125
- * [Customization](https://ej2.syncfusion.com/documentation/daterangepicker/customization?lang=typescript#customization) - The appearance of the component can be customized completely.
126
- * [Format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=daterangepicker#/material/daterangepicker/date-format.html) - The control’s input value can be custom formatted apart from the default culture’s specific date range format.
127
- * [Globalization](https://ej2.syncfusion.com/documentation/daterangepicker/globalization?lang=typescript#globalization) - Supports globalization (internationalization and localization) to translate the names of months, days, and button text to any supported language.
128
-
129
- <p align="center">
130
- Trusted by the world's leading companies
131
- <a href="https://www.syncfusion.com/">
132
- <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
133
- </a>
134
- </p>
135
-
136
- ## Setup
137
-
138
- To install `calendars` and its dependent packages, use the following command.
139
-
140
- ```sh
141
- npm install @syncfusion/ej2-calendars
142
- ```
143
-
144
- ## Supported frameworks
145
-
146
- Calendar controls are also offered to following list of frameworks.
147
-
148
- | [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; |
149
- | :-----: | :-----: | :-----: | :-----: | :-----: |
150
-
151
- ## Showcase samples
152
-
153
- * Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard?utm_source=npm&utm_campaign=daterangepicker)
154
- * Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=datepicker)
155
-
156
- ## Support
157
-
158
- Product support is available through the following mediums.
159
-
160
- * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
161
- * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm)
162
- * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
163
- * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm)
164
- * Live chat
165
-
166
- ## Changelog
167
-
168
- Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/calendars/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
169
-
170
- ## License and copyright
171
-
172
- > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
173
-
174
- > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
175
-
176
- See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license) for more info.
177
-
178
- © Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
1
+ # JavaScript Calendars Controls
2
+
3
+ The [JavaScript Calendars](https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) package contains date and time components such as calendar, date picker, date range picker, date time picker, and time picker. These components come with options to disable dates, restrict selection, and show custom events.
4
+
5
+ ## What's Included in the JavaScript Calendars Package
6
+
7
+ The [JavaScript Calendars](https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) package includes the following list of components.
8
+
9
+ ### JavaScript Calendar
10
+
11
+ The [JavaScript Calendar](https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) control is a graphical user interface component that displays a Gregorian or Islamic Calendar and allows selection of a date.
12
+
13
+ <p align="center">
14
+ <a href="https://ej2.syncfusion.com/documentation/calendar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
15
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/calendar/default.html">Online demos</a> .
16
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
17
+ </p>
18
+
19
+ <p align="center">
20
+ <img alt="JavaScript Calendar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-calendar.png">
21
+ </p>
22
+
23
+ #### Key features
24
+
25
+ * [Date range](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=calendar#/material/calendar/date-range.html) - Restricts the range of dates that can be selected by using the `min` and `max` properties.
26
+ * [Customization](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=calendar#/material/calendar/special-dates.html) - Allows complete control over the appearance of the calendar component.
27
+ * [Month or year selection](https://ej2.syncfusion.com/documentation/calendar/calendar-views?lang=typescript#calendar-views) - Provides a flexible option to select only a month or year as the date value.
28
+ * [First day of week](https://ej2.syncfusion.com/documentation/calendar/how-to.html?lang=typescript#change-the-first-day-of-the-week) - Changes the first day of all weeks in every month.
29
+ * [Week number](https://ej2.syncfusion.com/documentation/calendar/how-to/render-the-calendar-with-week-numbers?lang=typescript#render-the-calendar-with-week-numbers) - Displays the week number of the selected date in the calendar by enabling the week number option.
30
+ * [Disabled dates](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=calendar#/material/calendar/disabled.html) - Disables any date to prevent the user from selecting that date.
31
+ * [Start and depth view](https://ej2.syncfusion.com/documentation/calendar/calendar-views?lang=typescript#view-restriction) - Calendar has `month`, `year`, and `decade` views that provide flexibility to select dates.
32
+ * [Highlight weekends](https://ej2.syncfusion.com/documentation/calendar/customization?lang=typescript#highlight-weekends) - The calendar supports to highlighting every weekend in a month.
33
+ * [Globalization](https://ej2.syncfusion.com/documentation/calendar/globalization?lang=typescript#calendar) - Supports globalization (internationalization and localization) to translate the names of months, days, and the today button text to any supported language.
34
+
35
+ ### JavaScript DatePicker
36
+
37
+ The [JavaScript DatePicker](https://www.syncfusion.com/javascript-ui-controls/js-datepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) component is a graphical user interface component that allows selection or entry of a date value.
38
+
39
+ <p align="center">
40
+ <a href="https://ej2.syncfusion.com/documentation/datepicker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
41
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/datepicker/default.html">Online demos</a> .
42
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-datepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
43
+ </p>
44
+
45
+ <p align="center">
46
+ <img alt="JavaScript DatePicker Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-datepicker.png">
47
+ </p>
48
+
49
+ #### Key features
50
+
51
+ * [Placeholders](https://ej2.syncfusion.com/documentation/datepicker/how-to/set-the-placeholder/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendars-npm) - Placeholder is a hint text that is displayed in the DatePicker; it is used to indicate the format of the date that the user should enter, such as mm/dd/yyyy or dd/mm/yyyy.
52
+ * [Mask date input](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendars-npm/#/material/datepicker/input-mask.html) - The mask date input restricts the user from typing unwanted characters in the text input, allowing only eligible date format to be typed.
53
+ * [Disabled date](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendars-npm/#/material/datepicker/disabled.html) - To disable a specific date in the picker calendar and restrict it from being set or selected in the DatePicker.
54
+ * [Date format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=datepicker#/material/datepicker/date-format.html) - The DatePicker control’s input value can be custom formatted apart from the default culture’s specific date format.
55
+ * [Incomplete date validation](https://ej2.syncfusion.com/documentation/datepicker/strict-mode?utm_source=npm&utm_campaign=datepicker) - The strictMode is an act that allows entry only of valid dates within the specified min or max range in a text box.
56
+ * [Globalization](https://ej2.syncfusion.com/documentation/calendar/globalization?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendars-npm/#calendar) - Support globalization (also known as internationalization and localization) to allow you to translate the names of months, days, and other text elements in the calendar to any supported language. This can be useful in cases where you want to display the calendar in a language other than the default language.
57
+
58
+ ### JavaScript TimePicker
59
+
60
+ The [JavaScript TimePicker](https://www.syncfusion.com/javascript-ui-controls/js-timepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) component is a simple and intuitive interface component that allows selection of a time value from the popup list or setting a desired time value.
61
+
62
+ <p align="center">
63
+ <a href="https://ej2.syncfusion.com/documentation/timepicker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
64
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/timepicker/default.html">Online demos</a> .
65
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-timepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
66
+ </p>
67
+
68
+ <p align="center">
69
+ <img alt="JavaScript TimePicker Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-timepicker.png">
70
+ </p>
71
+
72
+ #### Key features
73
+
74
+ * [Time range](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/time-range.html) - Restricts the entry or selection of time values within a specific range of time by using `min` and `max` properties.
75
+ * [Time format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/time-format.html) - Apart from the default culture specific time format, the time picker control’s input value can also be custom formatted.
76
+ * [Strict mode](https://ej2.syncfusion.com/documentation/timepicker/strict-mode?lang=typescript#timepicker) - The strictMode is an act that allows entry of only valid time values within the specified min and max range in a text box.
77
+ * [Disabled time](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/list-formatting.html) - Any number of time values can be disabled in the popup list items to prevent selection of those times.
78
+ * [Time intervals](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/list-formatting.html) - Allows populating the time list with intervals between the times in the popup list to enable selection of proper time value.
79
+ * [Customization](https://ej2.syncfusion.com/documentation/timepicker/how-to/css-customization?lang=typescript#css-customization) - The appearance of the time picker can be customized completely.
80
+ * [Time list with duration](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=timepicker#/material/timepicker/list-formatting.html) - Supports customization of the control’s popup list items with time duration.
81
+ * [Mask time input](https://ej2.syncfusion.com/demos/#/bootstrap5/timepicker/input-mask.html) - The mask time input restricts the user from typing unwanted characters in the text input, allowing only eligible time format to be typed.
82
+ * [Globalization](https://ej2.syncfusion.com/documentation/timepicker/globalization?lang=typescript#timepicker) - Supports globalization (internationalization and localization) to update time popup list values to match any specified culture.
83
+
84
+ ### JavaScript DateTimePicker
85
+
86
+ The [JavaScript DateTimePicker](https://www.syncfusion.com/javascript-ui-controls/js-datetime-picker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) component is a graphical user interface component that allows an end user to enter or select a date and time values from a pop-up calendar and time list pop-up.
87
+
88
+ <p align="center">
89
+ <a href="https://ej2.syncfusion.com/documentation/datetimepicker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
90
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/datetimepicker/default.html">Online demos</a> .
91
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-datetime-picker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
92
+ </p>
93
+
94
+ <p align="center">
95
+ <img alt="JavaScript DateTimePicker Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-datetimepicker.png">
96
+ </p>
97
+
98
+ #### Key features
99
+
100
+ * [Date time range](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=datetimepicker#/material/datetimepicker/date-time-range.html) - Restricts the entry or selection of values within a specific range of dates and times by using `min` and `max` properties.
101
+ * [Date time format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=datetimepicker#/material/datetimepicker/date-time-format.html) - The control’s input value can be custom formatted apart from the default culture’s specific date time format.
102
+ * [Mask date time input](https://ej2.syncfusion.com/demos/#/bootstrap5/datetimepicker/input-mask.html) - The mask date time input restricts the user from typing unwanted characters in the text input, allowing only eligible date and time format to be typed.
103
+
104
+ ### JavaScript DateRangePicker
105
+
106
+ The [JavaScript DateRangePicker](https://www.syncfusion.com/javascript-ui-controls/js-daterangepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm) component is a graphical user interface control that allows an end user to select start and end date values as a range from a calendar pop-up or by entering the value directly in the input element.
107
+
108
+ <p align="center">
109
+ <a href="https://ej2.syncfusion.com/documentation/daterangepicker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Getting Started</a> .
110
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm#/material/daterangepicker/default.html">Online demos</a> .
111
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-daterangepicker?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm">Learn more</a>
112
+ </p>
113
+
114
+ <p align="center">
115
+ <img alt="JavaScript DateRangePicker Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-daterangepicker.png">
116
+ </p>
117
+
118
+ #### Key features
119
+
120
+ * [Preset ranges](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=daterangepicker#/material/daterangepicker/presets.html) - Defines the preset ranges to select the frequently used date range by the end users.
121
+ * [Range restriction](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=daterangepicker#/material/daterangepicker/date-range.html) - This control restricts the entry or selection of values within a specific range of date by defining the min and max properties.
122
+ * [Limit the selection range](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=daterangepicker#/material/daterangepicker/day-span.html) - Directs the end user to select only the date range with specific minimum and maximum number of days’ count by setting the minDays and maxDays options.
123
+ * [First day of week](https://ej2.syncfusion.com/documentation/daterangepicker/customization?lang=typescript#first-day-of-week) - Changes the first day of weeks in every month.
124
+ * [Strict mode](https://ej2.syncfusion.com/documentation/daterangepicker/range-restriction?lang=typescript#strict-mode) - The strictMode is an act that allows entry only of a valid date within the specified min and max range in a textbox.
125
+ * [Customization](https://ej2.syncfusion.com/documentation/daterangepicker/customization?lang=typescript#customization) - The appearance of the component can be customized completely.
126
+ * [Format](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=daterangepicker#/material/daterangepicker/date-format.html) - The control’s input value can be custom formatted apart from the default culture’s specific date range format.
127
+ * [Globalization](https://ej2.syncfusion.com/documentation/daterangepicker/globalization?lang=typescript#globalization) - Supports globalization (internationalization and localization) to translate the names of months, days, and button text to any supported language.
128
+
129
+ <p align="center">
130
+ Trusted by the world's leading companies
131
+ <a href="https://www.syncfusion.com/">
132
+ <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
133
+ </a>
134
+ </p>
135
+
136
+ ## Setup
137
+
138
+ To install `calendars` and its dependent packages, use the following command.
139
+
140
+ ```sh
141
+ npm install @syncfusion/ej2-calendars
142
+ ```
143
+
144
+ ## Supported frameworks
145
+
146
+ Calendar controls are also offered to following list of frameworks.
147
+
148
+ | [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; |
149
+ | :-----: | :-----: | :-----: | :-----: | :-----: |
150
+
151
+ ## Showcase samples
152
+
153
+ * Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard?utm_source=npm&utm_campaign=daterangepicker)
154
+ * Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=datepicker)
155
+
156
+ ## Support
157
+
158
+ Product support is available through the following mediums.
159
+
160
+ * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
161
+ * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm)
162
+ * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
163
+ * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-calendar-npm)
164
+ * Live chat
165
+
166
+ ## Changelog
167
+
168
+ Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/calendars/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
169
+
170
+ ## License and copyright
171
+
172
+ > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
173
+
174
+ > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
175
+
176
+ See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license) for more info.
177
+
178
+ &copy; Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.