jQuery UI Widgets Forums Scheduler Bottom calendar bar and calendar display blocks

This topic contains 11 replies, has 2 voices, and was last updated by  Todor 5 hours, 47 minutes ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author

  • andypet74
    Participant

    Hi, I have two specific questions, firstly, how do you enable the little key at the bottom of the calendar? Mine is off for some reason and I don’t know how to turn it on.

    Secondly, can I customize what data is displayed in the little block/tooltips on the calendar itself? Right now each appointment just says my person’s name but no description, how can I go about adding more detail to each appointment block displayed on the calendar.

    EDIT – as a heads up, I do have [showLegend]=”true” in my component.html

    • This topic was modified 1 week ago by  andypet74.

    Todor
    Participant

    Hello andypet74,

    1) Could you please be more specific, because I’m not quite sure for what key you are talking about? You could share a jsfiddle example.
    2) I would suggest you to use renderAppointment property. It sets a function called when the Scheduler is rendering its appointments. The function has one parameter which is Object with the following members:

    – appointment – Object which has the appointmentDataFields. See appointmentDataFields property.
    – width – integer. Gets the appointment’s width.
    – height- integer. Gets the appointment’s height.
    – textColor – hex string. Gets or sets the appointment’s text color.
    – background – hex string. Gets or sets the appointment’s background color.
    – borderColor – hex string. Gets or sets the appointment’s border color.
    – style – hex string. Gets or sets the appointment’s style. This is alternative to textColr, background and borderColor, because it sets them all depending on the HEX string you set.
    – cssClass – string. This can be used for adding CSS Class to the appointment.
    – html – html string. This can be used for replacing the appointment’s HTML Content.
    – view – string. Gets the current view – ‘dayView’, ‘weekView’, ‘monthView’, timelineDayView’, ‘timelineWeekView’, ‘timelineMonthView’

    You could review the following demo which uses this property.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com


    andypet74
    Participant

    Sorry, the key I am talking about is the legend at the bottom that shows usually “rooms”. In my example, I do not have rooms so it makes it slightly more difficult. I will share some of my code because my schedule is probably not typical.

    First off, my schedule is loaded on page load but not all the data is. A user would select the company they wish to view and then it will populate the scheduler with that companies’ employee’s and their schedules. I do this with the following function:

    generateAppointments(companyID) {
       
        this.appointments = null;
        this.appointmentService.getAppointmentsByCompanyID(companyID).then(r => {
          console.log(r);
          this.appointments = r;
          this.appointments.forEach((item, index) => {
            console.log(item);
            let newAppointment = {
              id: item.appointmentID,
              description: item.appointmentNotes,
              subject: item.employeeLastName + ", " + item.employeeFirstName,
              calendar: item.employeeLastName + ", " + item.employeeFirstName,
              observCat: item.customerID,
              observSub: item.observationCategoryID,
              start: new Date(item.appointmentDate),
              end: new Date(item.appointmentEndDate),
            }
            //console.log(newAppointment);
            this.scheduler.addAppointment(newAppointment);
          });
           let dataAdapter: any = new jqx.dataAdapter(this.source);
        });

    The angular code I have for the scheduler is:

    source: any =
        {
          dataType: "array",
          dataFields: [
            { name: 'id', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'subject', type: 'string' },
            { name: 'observCat', type: 'string' },
            { name: 'observSub', type: 'string' },
            { name: 'calendar', type: 'string' },
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' }
          ],
          id: 'id',
          localData: this.appointmentArray
        };
    
      //dataAdapter: any = new jqx.dataAdapter(this.source);
     
      schedulerSettings: jqwidgets.SchedulerOptions = {
        showLegend: true
      }
      appointmentDataFields: any =
        {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          subject: "subject",
          resourceId: "calendar",
        };
    
      resources: any =
        {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        };
    
      views: any[] =
        [
          'dayView',
          'weekView',
          'monthView'
        ];

    In my component HTML I call it using:

          <jqxScheduler [theme]="'material'" #schedulerReference (onCellClick)="CellClick($event,content)"
                        [date]="date" [width]="'100%'" [height]="'70vh'" [source]="dataAdapter" [showLegend]="true" [view]="'weekView'"
                        [appointmentDataFields]="appointmentDataFields" [editDialog]="false" [resources]="resources" [views]="views" [editDialogCreate]="editDialogCreate">
          </jqxScheduler>

    We have a custom model that pops up when you click on the scheduler. It has the information we want as we were having too many issues customizing the default dialogs. Since I don’t have “rooms” I am wondering if that is what is causing my “key”/”legend” to not appear at the bottom. See Picture Attached.
    Example
    Also my second question I think is what you did answer, I will have to play with it but I was asking if I could add more information to the cards, mine only says Test 1 and Test 2 but it would be nice to display some extra information to the user. I believe what you suggested will work I just need to test it out.


    Todor
    Participant

    Hello andypet74,

    About your first question. You are correct. If you don’t have rooms your legend stays hidden.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com


    andypet74
    Participant

    So I can set a room to what I want to get it to appear and use the html of the renderAppointment to customize what it looks like on the calendar.


    Todor
    Participant

    Hello andypet74,

    You could set each appointment to different room and they will show in different colors. From the legend below you could show/hide each room(appointments). So the answer to your question is yes, you could set a room and the legend will show.
    renderAppointment property customizes the appointment, yes as shown in the following demo.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

    • This reply was modified 5 days, 6 hours ago by  Todor.

    andypet74
    Participant

    So in this example, I see the bottom legend but it is being set by the Calendar property. I have that property set in mine but no legend on the bottom, any idea why?

    https://jseditor.io/?key=jqwidgets-scheduler-template


    Todor
    Participant

    Hello andypet74,

    You have to have calendar property set for the appointments and the showLegend property set to true for the scheduler itself. Probably you don’t have one of these. If you have both set and still no legend is showing, please share your code for better investigation.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com


    andypet74
    Participant

    I do have showLegend set to true and I have calendar being set, see below

    This is the “important” code of the Typescript:

      generateAppointments(companyID) {
       
        this.appointments = null;
        this.appointmentService.getAppointmentsByCompanyID(companyID).then(r => {
          console.log(r);
          this.appointments = r;
    
          this.events = r.map(item => {
            return {
              id: item.appointmentID,
              description: item.appointmentNotes,
              subject: item.employeeLastName + ", " + item.employeeFirstName,
              calendar: item.employeeLastName + ", " + item.employeeFirstName,
              observCat: item.customerID,
              observSub: item.observationCategoryID,
              start: new Date(item.appointmentDate),
              end: new Date(item.appointmentEndDate),
              resizable: false,
              draggable: false,
              readOnly: false
            }
    
          });
          this.refreshdata();
          console.log(this.events);
    
          //this.appointments.forEach((item, index) => {
            //console.log(item);
            //let newAppointment = {
              //id: item.appointmentID,
              //description: item.appointmentNotes,
              //subject: item.employeeLastName + ", " + item.employeeFirstName,
              //calendar: item.employeeLastName + ", " + item.employeeFirstName,
              //observCat: item.customerID,
              //observSub: item.observationCategoryID,
              //start: new Date(item.appointmentDate),
              //end: new Date(item.appointmentEndDate),
            //}
            //console.log(newAppointment);
            //this.scheduler.addAppointment(newAppointment);
          //});
          //jqxScheduler('render');
          //let dataAdapter: any = new jqx.dataAdapter(this.source);
        });
        //console.log(this.source);
        
      };
    
      refreshdata() {
        this.source.localData = this.events;
        this.dataAdapter = new jqx.dataAdapter(this.source)
    
      }
    
     async getCustomerNameByID(customerID) {
        await this.appointmentService.getCustomerNameByCustomerID(customerID)
          .then(data => { this.customerName = data; return data; }).catch(err => console.log(err));
        
      }
      
      source: any =
        {
          dataType: "array",
          dataFields: [
            { name: 'id', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'location', type: 'string' },
            { name: 'subject', type: 'string' },
            { name: 'observCat', type: 'string' },
            { name: 'observSub', type: 'string' },
            { name: 'calendar', type: 'string' },
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' },
            { name: 'resizable', type: 'bool' },
            { name: 'draggable', type: 'bool' },
            { name: 'readOnly', type: 'bool' }
          ],
          id: 'id',
          localData: this.events
        };
      dataAdapter: any = new jqx.dataAdapter(this.source);
     
      appointmentDataFields: any =
        {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "location",
          subject: "subject",
          resourceId: "calendar",
          resizable: "resizable",
          readOnly: "readOnly",
          draggable: "draggable"
        };
    
      resources: any =
        {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        };
    
      //views: any[] =
      //  [
      //    'dayView',
      //    'weekView',
      //    'monthView'
      //  ];
      views: any[] =
        [
          {
            type: 'dayView',
            showWeekends: false
          },
          {
            type: "weekView",
            showWeekends: false,
            timeRuler: {
              scaleStartHour: 8,
              scaleEndHour: 22,
              hidden: false
            },
            workTime:
            {
              fromDayOfWeek: 1,
              toDayOfWeek: 5,
              fromHour: 8,
              toHour: 22
            }
          },
          {
            type: 'monthView',
            monthRowAutoHeight: true
          },
          'agendaView'
        ];

    If you look at the commented out code in the generateAppointments method you can see I set the calendar property. I also have showLegend set to true in the settings as well as in the HTML:

          <jqxScheduler [theme]="'material'" #schedulerReference (onCellClick)="CellClick($event,content)"
                        [date]="date" [width]="'100%'" [height]="'70vh'" [source]="dataAdapter" [showLegend]="true" [view]="'weekView'" [renderAppointment]="renderAppointment"
                        [appointmentDataFields]="appointmentDataFields" [editDialog]="true" [resources]="resources" [views]="views" [editDialogCreate]="editDialogCreate">
          </jqxScheduler>

    Also, the uncommented code isn’t working in the generateAppointments, I am trying to get it to work but it won’t add appointments to the scheduler. It sets all the variables fine but I can’t get data to the scheduler. I have a seperate post about that. That being said, I can get appointments on the scheduler if I uncomment the commented code.


    Todor
    Participant

    Hello andypet74,

    I’ve made a similar example for you. It’s shown how to update scheduler’s data. Also please take a note that the legend is working.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com


    andypet74
    Participant

    I so appreciate it.

    I got 90% of it working. My only problem now is that the legend does not appear. I am guessing this is because the data I bind comes from promises. I would imagine that is the reason when the scheduler is initially created there is no data and so it doesn’t have the functionality to create a legend after initially being created. Is that a correct assumption? I know there is a destroy method but there is not a way to rebuild the scheduler after destroying it is there.

    I can see my events now and that is all working, it is just the legend. I could make my own legend I suppose, I assume there is a way to hide and unhide appointments.


    Todor
    Participant

    Hello andypet74,

    Yes, you could use showAppointmentsByResource/hideAppointmentsByResource methods for this purpose.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.