Any tips for dealing with: Scheduler?

[jovanovicParticipant]

How can I customize appointment rendering in jqxScheduler when using Vue?

[adminKeymaster]

Hi jovanovic,

The scheduler auto-renders on init or view changes. For dynamic updates (e.g., adding appointments), use this.$refs.myScheduler.addAppointment(appointment) or updateBoundData().

To customize the rendering, we use the ‘renderAppointment’ function.

<template>
  <div>
    <JqxScheduler
      ref="myScheduler"
      :width="getWidth"
      :height="600"
      :source="dataAdapter"
      :date="new Date(2023, 10, 23)"
      :view="'weekView'"
      :appointmentDataFields="appointmentDataFields"
      :renderAppointment="renderAppointment"
      :theme="'material'"
    />
  </div>
</template>

<script>
import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';

export default {
  components: {
    JqxScheduler
  },
  data() {
    return {
      getWidth: '90%',
      appointmentDataFields: {
        from: 'startDate',
        to: 'endDate',
        id: 'id',
        description: 'description',
        location: 'location',
        subject: 'subject',
        resourceId: 'calendar'
      },
      source: {
        dataType: 'array',
        dataSource: [
          {
            id: 1,
            startDate: new Date(2023, 10, 23, 9, 0),
            endDate: new Date(2023, 10, 23, 11, 0),
            subject: 'Team Meeting',
            description: 'Weekly sync-up',
            type: 'meeting'  // Custom field for styling
          },
          {
            id: 2,
            startDate: new Date(2023, 10, 23, 14, 0),
            endDate: new Date(2023, 10, 23, 15, 30),
            subject: 'Code Review',
            description: 'Review PR #123',
            type: 'task'
          }
        ],
        id: 'id'
      },
      dataAdapter: null
    };
  },
  mounted() {
    this.dataAdapter = new window.jqx.dataAdapter(this.source);
  },
  methods: {
    renderAppointment(data) {
      // Access appointment data
      const appointment = data.appointment;
      const type = appointment.type || 'default';

      // Determine styles based on type
      let background = '#E7F3FF';
      let borderColor = '#0078D4';
      let icon = '📅';  // Default icon

      if (type === 'meeting') {
        background = '#FFF2CC';
        borderColor = '#FFA500';
        icon = '🎥';  // Video call icon
      } else if (type === 'task') {
        background = '#D4EDDA';
        borderColor = '#28A745';
        icon = '✅';  // Task icon
      }

      // Custom HTML: Icon + Subject + Description (truncated if long)
      const shortDesc = appointment.description.length > 50 ? appointment.description.substring(0, 50) + '...' : appointment.description;
      data.html = 

${icon}

${appointment.subject}

${shortDesc}

`;

// Apply styles
data.background = background;
data.borderColor = borderColor;
data.color = ‘#000’; // Text color
data.htmlWidth = ‘auto’; // Let content determine width
data.htmlHeight = ‘auto’; // Allow multi-line height

return data;
}
}
};
`

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts