[GUIDE] Setting up V-Calendar and an example on attributes dots

Support
1

Purpose if you want to highlight certain dates.

This is a guide on how to add this library and to use their attributes dots.
Reference: Attributes | V-Calendar

Step 1 - CDN inside of the DOM Header Insertions

<link rel='stylesheet' href='https://unpkg.com/v-calendar/lib/v-calendar.min.css'>
<script src='https://unpkg.com/v-calendar'></script>

Step 2 - Inside your HTML snippet

<v-calendar
:from-date="new Date(2022, 3, 1)" 
:attributes="model.attributes"> </v-calendar>

Step 2 - Inside Page Info > namedActions > onFormLoad

  • add a function snippet, and the following code
model.attributes = [{
    dot: true,
    dates: [
        new Date(2022, 3, 1), // Apr 1st
        new Date(2022, 3, 10), // Apr 10th
        new Date(2022, 3, 22), // Apr 22nd
    ]
}]

Just an important note,
these date picker libraries want a specific date (UTC). So if you are sending dates from FM to FMBF, i’ve found its best to convert the dates in the front end using moment, then convert them back to your FM format if you’re changing the information and sending it back.

1 Like
2

Thanks for the tip. As not-web-developer I have a couple of questions:

Step 2 - Inside Page Info > namedActions > onFormLoad

in “page info” i see something like this:

pageinfo
pageinfo1904Ă—1078 238 KB

I need to create a new “named action” key in “miscformsettings”? in that case, could you post a example?

regarding the code, how can I create the date directly from the model (assuming a structure like:

{
“mezzi”: ,
“report”: {},
“rimorchi”: ,
“dates”:
}

where in “dates” I can use the structure I prefer?

thanks for your patience!

.g.

3

Hi there, here is information on namedActions definitely take a look it explains how to use them. Named Actions - FM BetterForms

You just need to readd this default in your page info

    "namedActions": {
        "onFormLoad": []
    },

You can certainly put the date directly in the model, but as I warned the library expects a specific format. With the wrong format it will break and not render.