solid-calendar

Receives the URL of a resource or of a container of resources via its data-src attribute, and displays it in a calendar. Here is the list of fields needed to display the resources properly:

  • name: name of the event displayed on the calendar

  • date: date on which the resource will be displayed

Like for solid-display, filters and searching capabilities can be easily added to interact with the list of data being displayed.

Mixins

This component uses the following mixins:

Please check their documentation to know more about their capabilities.

Mixin attributes

From list-mixin :

empty-value

Value to pass to the empty widget if the list is empty. It is accessible in ${value}

For example, it can be a route name, which allow to put a link in the widget.

<solid-display
    data-src="http://server/projects/"
    fields="name"
    empty-widget="no-project-widget"
    empty-value="add-project"
></solid-display>

<solid-widget name="no-project-widget">
    <template>
        <small>No project yet in the list. <solid-link next="${value}">click here to add one</solid-link></small>
    </template>
</solid-widget>

From next-mixin :

It can also be used to indicate the name attribute of the <solid-route> to reach after :

  • a click on a <solid-delete> button (only after the resource is correctly deleted);

  • a click on the submit button in a <solid-form> (only after the resource is correctly saved).

See the documentation of <solid-router> for more details.

From store-mixin :

data-src

The uri of the LDP resource you want to fetch and use in the component.

Each time this attribute is changed, the data is fetched again.

When the data has been successfuly fetched, the mixin ask the component to render.

nested-field

The name of the field of the requested resource to display. Useful when the source url is auto-generated (for instance, with the attribute bind-resources) but you need to display another field of this source.

The example below illustrates how to use nested-field attribute :

  • The profile is a resource nested in the current resource, it will automatically fetch the city, phone, website values to display them.

  • The second solid-display shows another way to display the values from a nested resource with dot ..

<solid-display
    data-src="data/list/user-1.jsonld"
    nested-field="profile"
    fields="city, phone, website"
></solid-display>

<solid-display
    data-src="data/list/user-1.jsonld"
    fields="profile.city, profile.phone, profile.website"
></solid-display>
nested-field attribute use

extra-context

The id of the <script> tag which contains the context you want to add for this component. An extra context looks like this:

<script id="custom-context" type="application/ld+json">
    { "user": "https://api.test-paris.happy-dev.fr/users/" }
</script>

If your <script> tag has the attribute data-default-context, this extra context will be applied on all the components which doesn’t have an extra-context attribute.

loader-id

Id of the loader element you want to display during the loading time.

Exemple of use :

<section>
    <h1>Solid-form</h1>
    <div id="form-loader"  >
        Loading&#8230;
    </div>
    <solid-form
        data-src="https://api.startinblox.com/users/"
        fields= "first_name, last_name, email"
        label-first_name = "First name"
        label-last_name = "Last name"
        label-email = "Email"
        loader-id = "form-loader">
    </solid-form>
</section>
Exemple of loader

no-render

Available from version 0.13

While this attribute is present on a component, no data will be fetched. This attribute is automatically removed by the router when the component is in a view which has been activated. This allow to lazy-load components.

store:// attribute values

Available from version 0.13

This mixin decode all attribute values starting by store://resource, store://container or store://user and replace them by the values fetched from the store.

It can be a value fetched from the current resource or the current logged in user (works with sib-auth).

This example will create a text input filled with the username of the current user:

<solid-form
    data-src="https://api.startinblox.com/circles/"
    fields="user"
    value-user="store://user.username"
></solid-form>

This example will write the name of the circle in the custom field:

<solid-display
    data-src="https://api.startinblox.com/circles/1/"
    fields="custom-field"
    value-custom-field="store://resource.name"
></solid-display>

Events

resourceSelect

Triggered when an event is clicked on the calendar