mobisroll.eventcalendar('#demo', {
  view: {
    timeline: {
      type: 'month',
      startTime: "08:00", 
      endTime: "17:00",
    }
  }
})

$('#demo').mobiscroll().eventcalendar({
  view: {
    timeline: {
      type: 'month',
      startTime: "08:00", 
      endTime: "17:00",
    }
  }
})

<mbsc-eventcalendar [view]="myView"></mbsc-eventcalendar>

public class MyComponent {
  public myView: MbscEventcalendarView = {
    timeline: {
      type: 'month',
      startTime: "08:00", 
      endTime: "17:00",
    }
  };

function (props)  {
  const myView = {
    timeline: {
      type: 'month',
      startTime: "08:00", 
      endTime: "17:00",
    }
  }
  return <>
    <Eventcalendar view={myView} />
  </>
}

<script setup>
  const myView = {
    timeline: {
      type: 'month',
      startTime: "08:00", 
      endTime: "17:00",
    }
  }
</script>

<template>
  <MbscEventcalendar :view="myView" />
</template>

#demo .mbsc-timeline-header-active,
#demo .mbsc-timeline-header-date,
#demo .mbsc-timeline-header-column {
  font-weight: bold;
  color: #000;
}

mobisroll.eventcalendar('#demo', {
  renderScheduleEvent: function (data) {
    return (
      '<div class="my-event-class">' + data.title + '</div>'
    );
  },
})

$('#demo').mobiscroll().eventcalendar({
  renderScheduleEvent: function (data) {
    return (
      '<div class="my-event-class">' + data.title + '</div>'
    );
  },
})

<mbsc-eventcalendar
  [scheduleEventTemplate]="eventTemplate"
>
  <ng-template #eventTemplate let-data>
    <div class="my-custom-class">{{data.title}}</div>
  </ng-template>
</mbsc-eventcalendar>

function (props)  {
  const customEventRenderer = (data) => (
      <div className="my-custom-event">{data.title}</div>
  );
  return <>
    <Eventcalendar
      renderScheduleEvent={customEventRenderer}
    />
  </>
}

<template>
  <MbscEventcalendar>
    <template #scheduleEvent="data">
      <div class="my-custom-event">{{ data.title }}</div>
    </template>
  </MbscEventcalendar>
</template>

mobisroll.eventcalendar('#demo', {
  resources: [{
    id: 'unassigned_tickets',
    name: "Unassigned Tickets",
    color: "#c8cdcf",
    fixed: true, 
  }, /* ... */],
})

$('#demo').mobiscroll().eventcalendar({
  resources: [{
    id: 'unassigned_tickets',
    name: "Unassigned Tickets",
    color: "#c8cdcf",
    fixed: true, 
  }, /* ... */],
})

<mbsc-eventcalendar [resources]="myResources"></mbsc-eventcalendar>

public class MyComponent {
  public myResources: MbscResource[] = [{
    id: 'unassigned_tickets',
    name: "Unassigned Tickets",
    color: "#c8cdcf",
    fixed: true, 
  }, /* ... */]

function (props)  {
  const [resources, setResources] = useState([{
    id: 'unassigned_tickets',
    name: "Unassigned Tickets",
    color: "#c8cdcf",
    fixed: true, 
  }, /* ... */])

  return <>
    <Eventcalendar resources={resources} />
  </>
}

<script setup>
  import { ref } from 'vue';
  import { MbscEventcalendar } from '@mobiscroll/vue';

  const resources = ref([{
    id: 'unassigned_tickets',
    name: "Unassigned Tickets",
    color: "#c8cdcf",
    fixed: true, 
  }, /* ... */]);
</script>

<template>
  <MbscEventcalendar
    :resources="resources"
  >
  </MbscEventcalendar>
</template>

mobisroll.eventcalendar('#demo', {
  dragInTime: false, 
  dragToResize: false,
  dragToCreate: true,
});

$('#demo').mobiscroll().eventcalendar({
  dragInTime: false, 
  dragToResize: false,
  dragToCreate: true,
});

<mbsc-eventcalendar
  [dragInTime]="false",
  [dragToResize]="false",
  [dragToCreate]="true",
></mbsc-eventcalendar>

<Eventcalendar
  dragInTime={false},
  dragToResize={false},
  dragToCreate={true},
/>

<MbscEventcalendar
  :dragInTime="false", // [!code highlight]
  :dragToResize="false",
  :dragToCreate="true",
>
</MbscEventcalendar>