API tools faq
paste
Pivotonian

Calendar

Pivotonian
Sep 23rd, 2025
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.63 KB | None | 0 0
raw download clone embed print report
  1. type: custom:button-card
  2. name: |
  3. [[[
  4. const d = new Date();
  5. const day = d.toLocaleDateString("en-US", { weekday: "long" });
  6. const date = d.getDate();
  7. const month = d.toLocaleDateString("en-US", { month: "long" });
  8. function nth(n) {
  9. if (n > 3 && n < 21) return "th";
  10. switch (n % 10) {
  11. case 1: return "st";
  12. case 2: return "nd";
  13. case 3: return "rd";
  14. default: return "th";
  15. }
  16. }
  17. return `${day} ${date}${nth(date)} ${month}`;
  18. ]]]
  19. styles:
  20. grid:
  21. - grid-template-areas: '"n calendar" "list calendar"'
  22. grid-template-columns: 1fr 1fr
  23. grid-template-rows: auto
  24. align-content: start
  25. align-self: start
  26. justify-content: start
  27. justify-self: start
  28. column-gap: 20px
  29. card:
  30. - background-color: transparent
  31. border: solid 2px transparent
  32. height: 375px
  33. width: 628px
  34. padding: 15px 10px 10px 10px
  35. margin: 0px 0px 0px 0px
  36. name:
  37. - font-size: 18px
  38. font-weight: 600
  39. padding: 10px 15px 0px 15px
  40. align-self: start
  41. justify-self: start
  42. show_state: false
  43. show_name: true
  44. show_icon: false
  45. custom_fields:
  46. list:
  47. card:
  48. type: custom:button-card
  49. show_state: false
  50. show_name: true
  51. show_icon: false
  52. styles:
  53. grid:
  54. - grid-template-areas: >-
  55. "subheading_today""today_cal""subheading_tomorrow""tomorrow_cal""subheading_day_after""day_after_cal""subheading_day_after_day_after""day_after_day_after_cal""gap"
  56. card:
  57. - border-radius: 0px
  58. background-color: transparent
  59. padding: 0px 0px 0px 15px
  60. margin: 50px 0px 30px 0px
  61. overflow-y: auto
  62. height: 330px
  63. text-align: left
  64. custom_fields:
  65. today_cal:
  66. - margin: '-10px 0px 0px -15px'
  67. tomorrow_cal:
  68. - margin: '-10px 0px 0px -15px'
  69. day_after_cal:
  70. - margin: '-10px 0px 0px -15px'
  71. day_after_day_after_cal:
  72. - margin: '-10px 0px 0px -15px'
  73. custom_fields:
  74. subheading_today:
  75. card:
  76. type: custom:button-card
  77. show_name: true
  78. template: subheading_caps
  79. variables:
  80. var_name: TODAY
  81. today_cal:
  82. card:
  83. type: custom:today-card
  84. advance: 0
  85. time_format: h:mm a
  86. show_all_day_events: true
  87. show_past_events: true
  88. tap_action:
  89. action: none
  90. entities:
  91. - entity: calendar.family_2
  92. color: deep-orange
  93. - entity: calendar.email
  94. color: light-blue
  95. - entity: calendar.daycare
  96. color: amber
  97. - entity: calendar.geelong_cats
  98. color: navy
  99. - entity: calendar.babysitter
  100. color: red
  101. card_mod:
  102. style: |
  103. ha-card {
  104. background-color: transparent;
  105. padding: 0px;
  106. font-size: 15px;
  107.  
  108. text-align: left !important;
  109. }
  110. subheading_tomorrow:
  111. card:
  112. type: custom:button-card
  113. show_name: true
  114. template: subheading_caps
  115. variables:
  116. var_name: TOMORROW
  117. tomorrow_cal:
  118. card:
  119. type: custom:today-card
  120. advance: 1
  121. time_format: h:mm a
  122. show_all_day_events: true
  123. show_past_events: true
  124. tap_action:
  125. action: none
  126. entities:
  127. - entity: calendar.family_2
  128. color: deep-orange
  129. - entity: calendar.email
  130. color: light-blue
  131. - entity: calendar.daycare
  132. color: amber
  133. - entity: calendar.geelong_cats
  134. color: navy
  135. - entity: calendar.babysitter
  136. color: red
  137. card_mod:
  138. style: |
  139. ha-card {
  140. background-color: transparent;
  141. padding: 0px;
  142. font-size: 15px;
  143.  
  144. text-align: left !important;
  145. }
  146. subheading_day_after:
  147. card:
  148. type: custom:button-card
  149. show_name: true
  150. template: subheading_caps
  151. variables:
  152. var_name: |
  153. [[[
  154. let dayAfterTomorrow = new Date();
  155. dayAfterTomorrow.setDate(new Date().getDate() + 2);
  156. return dayAfterTomorrow.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
  157. ]]]
  158. day_after_cal:
  159. card:
  160. type: custom:today-card
  161. advance: 2
  162. time_format: h:mm a
  163. show_all_day_events: true
  164. show_past_events: true
  165. tap_action:
  166. action: none
  167. entities:
  168. - entity: calendar.family_2
  169. color: deep-orange
  170. - entity: calendar.email
  171. color: light-blue
  172. - entity: calendar.daycare
  173. color: amber
  174. - entity: calendar.geelong_cats
  175. color: navy
  176. - entity: calendar.babysitter
  177. color: red
  178. card_mod:
  179. style: |
  180. ha-card {
  181. background-color: transparent;
  182. padding: 0px;
  183. font-size: 15px;
  184.  
  185. text-align: left !important;
  186. }
  187. day_after_day_after_cal:
  188. card:
  189. type: custom:today-card
  190. advance: 3
  191. time_format: h:mm a
  192. show_all_day_events: true
  193. show_past_events: true
  194. tap_action:
  195. action: none
  196. entities:
  197. - entity: calendar.family_2
  198. color: deep-orange
  199. - entity: calendar.email
  200. color: light-blue
  201. - entity: calendar.daycare
  202. color: amber
  203. - entity: calendar.geelong_cats
  204. color: navy
  205. - entity: calendar.babysitter
  206. color: red
  207. card_mod:
  208. style: |
  209. ha-card {
  210. background-color: transparent;
  211. padding: 0px;
  212. font-size: 15px;
  213.  
  214. text-align: left !important;
  215. }
  216. subheading_day_after_day_after:
  217. card:
  218. type: custom:button-card
  219. show_name: true
  220. template: subheading_caps
  221. variables:
  222. var_name: |
  223. [[[
  224. let twoDaysAfterTomorrow = new Date();
  225. twoDaysAfterTomorrow.setDate(new Date().getDate() + 3);
  226. return twoDaysAfterTomorrow.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
  227. ]]]
  228. gap:
  229. card:
  230. type: custom:gap-card
  231. height: 20
  232. calendar:
  233. card:
  234. type: custom:button-card
  235. show_name: false
  236. show_icon: false
  237. show_state: false
  238. styles:
  239. grid:
  240. - grid-template-areas: '"cal"'
  241. align-content: start
  242. align-self: start
  243. justify-content: start
  244. justify-self: start
  245. align-items: start
  246. card:
  247. - background: >-
  248. linear-gradient(180deg, rgba(255,255,255, 0.0) 20%,
  249. rgba(255,255,255, 0.1) 100%);
  250. width: 315px
  251. height: 420px
  252. margin: '-30px -15px 0px 0px'
  253. padding: 0px 10px 0px 25px
  254. align-content: start
  255. align-self: start
  256. justify-content: start
  257. justify-self: start
  258. align-items: start
  259. overflow-y: auto
  260. custom_fields:
  261. cal:
  262. - align-content: start
  263. align-self: start
  264. justify-content: start
  265. justify-self: start
  266. align-items: start
  267. background-color: transparent
  268. width: 350px
  269. margin: 0px 0px 0px -10px
  270. custom_fields:
  271. cal:
  272. card:
  273. type: custom:atomic-calendar-revive
  274. enableModeChange: true
  275. entities:
  276. - entity: calendar.email
  277. name: Family
  278. - entity: calendar.babysitter
  279. name: Babysitter
  280. - entity: calendar.daycare
  281. name: Daycare
  282. - entity: calendar.family
  283. name: Family
  284. - entity: calendar.geelong_cats
  285. name: Geelong Cats
  286. defaultMode: Calendar
  287. showAllDayEvents: false
  288. showMultiDay: false
  289. hideDuplicates: true
  290. showDate: false
  291. card_mod:
  292. style: |
  293. ha-card {
  294. text-align: left;
  295. align-content: start;
  296. justify-content: start;
  297. align-self: start;
  298. background-color: transparent;
  299. margin: 0px 0px 0px 0px !important;
  300. padding-left: 0px !important;
  301. line-height: 1.15em;
  302. letter-spacing: 0.01em;
  303. height: 375px;
  304. overflow-y: auto !important;
  305. }
  306.  
  307. th.cal {
  308. text-align: center;
  309. background: transparent
  310. }
  311.  
  312. .daywrap {
  313. color: transparent;
  314. border-top: 5px !important;
  315. }
  316.  
  317. .event-left {
  318. padding: 10px 5px 5px 20px;
  319. margin-right: 10px !important;
  320. }
  321.  
  322. .event-title {
  323. font-weight: bold;
  324. font-size: 12px;
  325. }
  326.  
  327. .event-right {
  328. padding: 10px 10px 5px 0px !important;
  329. }
  330.  
  331. .calDay {
  332. font-size: 5px;
  333. height: 20px;
  334. margin: 0px 0px 0px 0px
  335. }
  336.  
  337. .cal-card {
  338. background-color: transparent;
  339. height: 20px;
  340. }
  341.  
  342. .date {
  343. border: none !important;
  344. }
  345.  
  346. .next {
  347. border: none !important;
  348. }
  349.  
  350. .prev {
  351. border: none !important;
  352. }
  353.  
  354. .calTitleContainer {
  355. margin-left: -10px !important;
  356. padding-bottom: 20px !important;
  357. }
  358.  
  359. td.cal {
  360. border: 0px transparent !important;
  361. background-color: transparent !important;
  362. height: 50% !important;
  363. }
  364.  
  365. .calIcon {
  366. display: none !important;
  367. --mdc-icon-size: 0px;
  368. }
  369.  
  370. .mdc-icon-button {
  371. display: none;
  372. }
  373.  
  374. .calTableContainer {
  375. border: transparent;
  376. }
  377.  
  378. .location-link {
  379. display: none;
  380. }
  381.  
  382. .hours {
  383. --time-size: 12px !important;
  384. --time-color: white !important;
  385. }
  386. card_mod:
  387. style: |
  388.  
  389. :host {
  390. display: block;
  391. position: relative; margin: 0px 6px 0px 0px;
  392. }
  393.  
  394. :host::before {
  395.  
  396. content: "";
  397. position: absolute;
  398. inset: 0;
  399. border-radius: 30px;
  400. -webkit-backdrop-filter: blur(50px);
  401.  
  402. z-index: -1;
  403. padding: .1rem;
  404. background: linear-gradient(60deg,
  405. rgba(255,255,255,0.0) 0%,
  406. rgba(255,255,255,0.2) 49%,
  407. rgba(255,255,255,0.2) 51%,
  408. rgba(255,255,255,0.0) 100%);
  409. -webkit-mask:
  410. linear-gradient(#fff 0 0) content-box,
  411. linear-gradient(#fff 0 0);
  412. -webkit-mask-composite: xor;
  413. mask-composite: exclude;
  414. z-index: 0; filter: saturate(140%);
  415. }
  416.  
  417. :host::after {
  418. content: "";
  419. background: linear-gradient(180deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.0) 100%);
  420. position: absolute;
  421. inset: 0;
  422. border-radius: 30px;
  423. box-shadow: inset -8px 10px 15px rgba(0, 0, 0, 0.1);
  424. z-index: -1;
  425.  
  426. -webkit-backdrop-filter:blur(30px) saturate(110%) brightness(90%);
  427. filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.2)); }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!