[ANGULAR] - Edit Calendar Field

Our powerful JS Calendar component


User avatar
mats
Core Developer
Core Developer
Posts: 16505
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: [ANGULAR] - Edit Calendar Field

Post by mats »

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

Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
GabiNucci95
Posts: 22
Joined: Fri Aug 28, 2020 3:10 pm

Re: [ANGULAR] - Edit Calendar Field

Post by GabiNucci95 »

Image attached.

Attachments
calendar7.png
calendar7.png (15.71 KiB) Viewed 34 times

User avatar
mats
Core Developer
Core Developer
Posts: 16505
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: [ANGULAR] - Edit Calendar Field

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.

Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
GabiNucci95
Posts: 22
Joined: Fri Aug 28, 2020 3:10 pm

Re: [ANGULAR] - Edit Calendar Field

Post by GabiNucci95 »

agenda.component.html

Code: Select all


<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

Code: Select all

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

};

User avatar
fabio.policeno
Core Developer
Core Developer
Posts: 168
Joined: Sun Jul 12, 2020 8:22 pm

Re: [ANGULAR] - Edit Calendar Field

Post by fabio.policeno »

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!

Fabio Jr. Policeno
Core Developer


User avatar
GabiNucci95
Posts: 22
Joined: Fri Aug 28, 2020 3:10 pm

Re: [ANGULAR] - Edit Calendar Field

Post by GabiNucci95 »

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

Code: Select all

{
    "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"
            }
        ]
    }
}

User avatar
fabio.policeno
Core Developer
Core Developer
Posts: 168
Joined: Sun Jul 12, 2020 8:22 pm

Re: [ANGULAR] - Edit Calendar Field

Post by fabio.policeno »

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.

Fabio Jr. Policeno
Core Developer


User avatar
GabiNucci95
Posts: 22
Joined: Fri Aug 28, 2020 3:10 pm

Re: [ANGULAR] - Edit Calendar Field

Post by GabiNucci95 »

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


Post Reply