Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 8 VueJs - fulcalendar


Hi Lauris,

I`m starting to expand FulCalendar and got a question:

sample method for creating event

const addEvent = () => {
console.log("there you Go!");
calendarOptions.events = [
...calendarOptions.events,

{
title: "My Title",
start: "2022-11-16",
description: "lorem ipsum lorem ipsum",
className: "",
},
];
};


docs <a>https://fullcalendar.io/docs/event-object</a> says


In addition to the fields above, you may also include your own non-standard fields in each Event object. FullCalendar will not modify or delete these fields. For example, developers often include a description field for use in callbacks like event render hooks. Any non-standard properites are moved into the extendedProps hash during event parsing.


and when I trying to e.g
{
title: "My Title",
start: "2022-11-16",
description: "lorem ipsum lorem ipsum",
className: "",
myCustomProperty: "",
},

I get
"message": "Type '{ title: string; start: string; description: string; className: string; myCustomProperty: string; }' is not assignable to type '{ title: string; start: string; description: string; className: string; }'.\n Object literal may only specify known properties, and 'myCustomProperty' does not exist in type '{ title: string; start: string; description: string; className: string; }'.",

Lauris can you please give me a tip how to have additional custom properties? I would like to add 2 or 3 properties.
For now description is available in extendesProps property.

regards
Krystian
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


Lauris please omit my question.
I was tired happy

for any others ..... there is no problem for putting custom fields.
If you just load events from database your additional properties will be available through

event.extendedProps.<yourCustomProperty>



Hi Krystian,

Glad to hear that you already figured this out happy Let me know if you will need any further help.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(