Our powerful JS Calendar component


Post by mats »

Please share the code you use to instantiate the Calendar so we see your configuration.


Post by GabiNucci95 »

Image attached.

Attachments
calendar7.png
calendar7.png (15.67 KiB) Viewed 1522 times

Post by mats »

Please post code, in CODE tags - not images. Ideally you provide us a runnable zip file so we can run this locally.


Post by GabiNucci95 »

agenda.component.html


<div class="agenda-day">
        <bry-calendar #calendar style="height: 610px !important;" *ngIf="flag == true" [date]='calendarDateStart'
            [modes]="calendarConfig.modes" [resources]='resources' [events]='events' [sidebar]='calendarConfig.sidebar'
            [tbar]='calendarConfig.tbar' (onCalendarEvents)='onCalendarEvents($event)' [eventEditFeature]='calendarConfig.features.eventEdit'>
        </bry-calendar>
    </div>
 
 

calendar.config-ts

import * as moment from 'moment';

export const calendarConfig = {
    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager: {
        autoLoad: true,
        transport: {
            load: {
                url: 'assets/data/data.json'
            }
        }
    },
    date: new Date(Number(moment())),
    tbar: null,

// This element becomes the Calendar's encapsulating element
adopt: 'container',
minHeight: '20em',
eventColor: null,
sidebar: false,

// Features named by the properties are included.
// An object is used to configure the feature.
features: {
    eventEdit: {
        items: {
            eventTypeField: {
                index: 1,
                type: 'combo',
                name: 'eventType',
                ref: 'eventTypeField',
                label: 'Agendamento',
                items: ['Pessoal', 'Consulta']
            }          
        }
    }
},

// Modes are the views available in the Calendar.
// An object is used to configure the view.
modes: {
    year: false,
    month: false,
    week: false,
    agenda: false,
    day: {
        dayStartTime: 7,
        dayEndTime: 20,

        allDayEvents: {
            eventRenderer({ eventRecord }) {
                return `
               <div style="color: white; background-color: #1e88e5; display: flex; justify-content: space-between; height: 22px; width: 100%; padding: 0 5px;
               border-top-left-radius: 11px; border-bottom-left-radius: 11px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;">
               <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
               <div style="font-size: 10px">${eventRecord.name}</div>
               </div>
               </div>`;
            }
        },

        eventRenderer({ eventRecord }) {
            if (moment.duration(moment(eventRecord.endDate).diff(eventRecord.startDate)).asMinutes() >= 30) {
                return `<div style="display: flex; justify-content: space-between; color: black; background-color: transparent; width: 100%; height: 100%; padding: 3px 10px 7px">
        <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between;">
        <div style="font-weight: bold">${eventRecord.name}</div>
        <div style="color: #818181; font-size: 12px; font-weight: 400">${eventRecord.category}</div>
        </div>
        <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
        <span style="padding: 2px 10px; background-color: #a8a7a7; color: white; border-radius: 11px; font-weight: 400; font-size: 13px;">${eventRecord.organizationName}</span>
        </div>
        </div>`;
            } else {
                return `<div style="display: flex; justify-content: space-between; color: black; background-color: transparent; width: 100%; height: 100%; padding: 0px 10px">
        <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
        <div style="font-weight: bold; font-size: 10px">${eventRecord.name}</div>
        </div>
        </div>`;
            }
        }
    }
},

readOnly: false

};

Post by fabio.mazza »

Hi Gabriela,

You can see the json posted by Pavel here: viewtopic.php?p=78080#p78080

There are resources array data, those will be your calendars available.

Please post your json data (assets/data/data.json) then we can try to run a test case.

Thank you!

Best regards,
Fabio


Post by GabiNucci95 »

I was litterally trying to test what Pavel send me, to see if shows up on the calendar option:

{
    "success"    : true,
    "resources"  : {
        "rows" : [
            {
                "id"         : "bryntum",
                "name"       : "Bryntum team",
                "eventColor" : "blue"
            },
            {
                "id"         : "hotel",
                "name"       : "Hotel Park",
                "eventColor" : "orange"
            },
            {
                "id"         : "michael",
                "name"       : "Michael Johnson",
                "eventColor" : "deep-orange"
            }
        ]
    }
}

Post by fabio.mazza »

Gabriela, I was unable to run your test case, there are some dependencies variables missing that is about your logic, I had errors when tried to run. I tried to change the filtering example but there are some errors on console.

I would suggest you take a look on filtering demo and put your changes there.

But looking to your code I can realise that you are defining [resources]='resources' that will override your agendas from json file. Also you are not defining your crudManager like [crudManager] = "calendarConfig.crudManager" to calendar understand from where to bring the data.

Please take a look on that demo that there are very important informations.

Anything else, please let us know.

Best regards,
Fabio


Post by GabiNucci95 »

My problem was really the [crudManager]. Thanks for all your help!


Post Reply