Svelte Calendar Events “RangeError: Invalid time value”

Questions
1

I am having issues adding events to a calendar.
I am on ver 6.0.22.

I keep getting a “RangeError: Invalid time value” error.

eventsCal = f7.calendar.create({
  on: {
    init:function(calendar){

      var evts = [];
      evts.push({date:new Date(2021,7,14)})

      calendar.events = evts;
      calendar.update();

    }
    }
  });

Is someone able to assist as to why this is not working.

2

Some context is missing, make a live example How to ask a good question on forum

3

Here are more information.

I am trying to add events to a calendar.
The example in the kitchen sink works fine, but I dont understand why this does not work.
Essentially the events will be populated via my api.

I have set up a test page with the below code. (I tried to set it up on the sandbox but there is an error on the sandbox link for Svelte).

I had to take out the “script” tag because it would not allow me to paste it.

<Page name="test" class="pageBackground">
<!-- Top Navbar -->
<Navbar transparent>
</Navbar>
<!-- Page content -->
<div class="tabletContent">
  <div style="margin: 0 auto; max-width: 500px;">
      <Block strong>
        
      </Block>
  </div>
</div>

//scriptTAGstart>

import {
  f7,
  Page,
  Navbar,
  Button,
  Block,
} from 'framework7-svelte';

import { onMount,onDestroy } from 'svelte';

let eventsCal;

onMount(() => {

    var now = new Date();
var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
eventsCal = f7.calendar.create({
  on: {
    init:function(calendar){
      var evts = [];
      evts.push({date:today})

      calendar.events = evts;
      calendar.update();

    },
      monthYearChangeEnd: function (calendar, year, month) {
          console.log(month);
          console.log(year);

      }
    }
  });

  });

//scriptTAGend>

4

Where do you see such example with adding events on calendar event? Where did you see calendar.events syntax, it must be in params calendar.events.params

5

It was just something I tried.

I also tried the below as you have mentioned but got “Cannot set property ‘params’ of undefined” as an error.

calendar.events.params = evts;

I then inspected the calendar object and noticed the object was structured as calendar.params.events.

when I inspect the calendar object after setting calendar.params.events I can see my date in the object.

image

but I still get the same “Invalid time value” error.

6

I have managed to resolve it.

I was missing the “color” event parameter. I assumed the calendar would have a default color.
So when I did not see any events I assumed that I needed to call calendar.update().
It was this that was causing the error.