add visible date & title inside the month calendar

[rbalet]

Describe the solution you'd like Instead of adding dot with color, being able t see the date & title inside a colorful rectangle.

Actual	Idea

Describe your use case for implementing this feature

Seeing faster at what times what happen without having to click on the date

Additional context

I would be glad to help implementing this feature, if the chances of it being accepted are high enough

[matts-bot[bot]]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me

[HamzaTatheer]

Were you able to solve it or find a workaround ?

[rbalet]

@HamzaTatheer You could find a workaround while using the existing API https://mattlewis92.github.io/angular-calendar/#/custom-templates

I'll investigate a bit deeper if we could, somehow, add a Input that toggle the view, it would make it even better :)

[HamzaTatheer]

Thank youu! yes what you said seems possible. you can add toggle property to the custom template

[rbalet]

@HamzaTatheer If you think the documentation would need to be clarified, feel free to open pull request, they are always welcome <3

[HamzaTatheer]

yes i did feel personally that the documentation was not a alot clear. I will submit a pr of this by tonight

[abhishekcpwebline]

Any Update on this ? How to show title in month view instead of dot ? Also how can we drag and drop the event in month view ?

[rbalet]

@abhishekcpwebline

1. You create your own template Here a little example from my own code

<ng-template #customMonthCellTemplate let-day="day" let-locale="locale">
  <div class="cal-cell-top">
    <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
    <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
  </div>
  <div class="events-list">
    <div
      class="eventList-item"
      *ngFor="let i of day.events"
      [style]="'--current:' + i.colorBackground + ';--current-contrast:' + i.colorContrast"
    >
      <p class="event-title">
        {{ i.title }}
        <!-- <em *ngIf="i.titleAdditional">{{i.titleAdditional}}</em> -->
      </p>
      <p class="event-subtitle" [innerHTML]="i.subtitle"></p>
    </div>
  </div>
</ng-template>

Then you us it in the cellTemplate @input

      <mwl-calendar-month-view
        *ngSwitchCase="'month'"
        [cellTemplate]="customMonthCellTemplate"
      >
      </mwl-calendar-month-view>

Voilà

[abhishekcpwebline]

Thanks @rbalet. Worked well for me as well.

Now can you help me how can I drag and drop the events ? Also When I click on event - I need to show a popup with the event details.

[rbalet]

@abhishekcpwebline Sorry, I never used it so I would need to try it out.

This isn't part of this issue, so please open a new issue.

Kindly regards