Allow HTML code in the calendar title (#170)

vkurko · Aug 17, 2023 · 22eacf3 · 22eacf3
1 parent 88b9630
commit 22eacf3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1940,6 +1940,16 @@ function (date) {
 </tr>
 </table>
 
+The callback function can return HTML markup. If you want to use HTML entities in the title, you must use the callback function:
+
+```js
+function (date) {
+  let month = date.toLocaleDateString('en-US', { month: 'long' })
+  let year = date.toLocaleDateString('en-US', { year: 'numeric' })
+  return `<span class="month">${month}</span> <span class="year">${year}</span>`
+}
+```
+
 ### unselect
 - Type `function`
 - Default `undefined`

diff --git a/packages/core/src/Buttons.svelte b/packages/core/src/Buttons.svelte
@@ -27,7 +27,7 @@
 
 {#each buttons as button}
     {#if button == 'title'}
-        <h2 class="{$theme.title}">{$_viewTitle}</h2>
+        <h2 class="{$theme.title}">{@html $_viewTitle}</h2>
     {:else if button == 'prev'}
         <button class="{$theme.button} ec-{button}" aria-label={$buttonText.prev} on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
     {:else if button == 'next'}