Garbled print output in Agenda View with custom template

[Julius Peter]

Hi,

I have a problem with the print output of a scheduler agenda view with a custom template. The scheduler agenda display works fine, but the print output (and the preview) is garbled (see attached screen copies).  Custom template & classes below. What I try to achieve is that my custom template starts at the same horizontal position, irrespective if a recurrence-icon is shown or not.

Custom template:

<e-view option="Agenda">

<ng-template #eventTemplate let-data>

<ng-container *ngIf="activeOption===0">

<div class='agenda-pos'>

<div class="agenda-event-marker" [ngStyle]="{'background-color': data.TaskColor}"></div>

<div class="agenda-template">{{getDisplayTime(data)}}&nbsp;&nbsp;{{getPatientNameById(data.PatientID) || '---'}}&nbsp;&nbsp;{{data.Subject}}</div>

</div>

</ng-container>

<div class='agenda-pos'>

<div *ngIf="activeOption===1" class="condensed">{{ data.OwnerID ? getOwnerNameById(data.OwnerID) : ''}}</div>

</div>

</ng-template>

</e-view>

Relevant classes:

.condensed {

line-height: 100%;

margin-top: 3px;

}

.agenda-pos {

position: absolute;

left: 40px;

}

.agenda-event-marker {

float: left;

width: 16px;

height: 16px;

border-radius: 8px;

background-color: transparent;

margin-right: 15px;

margin-top: 3px;

}

Attachment: Syncfusion_agenda_garbled_print_2167a2e2.zip

[Praveenkumar Narasimhanaidu]

Hi Julius, 

Greetings from Syncfusion support. 

We have validated your query at our end and let you know that reported issue is not replicating at our end. We have prepared a sample based on your shared code which can be viewed from following link. We suspect the reason for this issue at your end style applied to is agenda-pos class. Kindly check that once by removing or modifying the style for agenda-pos class. 

Sample: https://stackblitz.com/edit/customized-agenda?file=app.component.html 

If the issue is still not resolved, please replicate your issue in the above shared sample. 

Regards, 

Praveenkumar. 

[Julius Peter]

Hi Praveenkumar,

your stackblitz example does not show any recurring events and my problem stems from  the recurrence icon in the agenda view. I forked your stackblitz with recurrent events - and I get the recurrence icon in the middle of the event title!! See forked stackblitz

(+ a screenshot of what I get attached).

Attachment: Screenshot_from_20201201_153452_83c3315c.zip

[Ravikumar Venkatesan]

Hi Julius, 

Thanks for the update. 

We have validated your reported query at our end. We have modified your shared sample at our end as shown in the below code and it works as expected which can be viewed from the following link. 

 

https://stackblitz.com/edit/customized-agenda-hvyjje?file=app.component.html  

[app.component.html] 

          <ng-template #eventTemplate let-data> 

            <ng-container> 

              <div class="e-icon-space" *ngIf="!data.RecurrenceRule"></div> 

              <div> 

                <div class="agenda-event-marker" [ngStyle]="{'background-color': data.CategoryColor}"></div> 

                <div class="agenda-template">{{data.Subject}}</div> 

              </div> 

            </ng-container> 

            <div> <div *ngIf="activeOption===1" class="condensed"> {{ data.OwnerID }} </div></div> 

          </ng-template> 

[app.component.css] 

.e-schedule .e-agenda-view .e-appointment.e-template { 

  flex-direction: inherit; 

  width: 100%; 

} 

 

.e-icon-space { 

  width: 31px; 

  height: 21px; 

} 

 

.agenda-template { 

  line-height: 2; 

} 

 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Julius Peter]

Thx Ravikumar,

this solution works perfectly for me.

Regards

Julius

[Nevitha Ravi]

Hi Julius, 

You are most welcome. We are glad that our provided solution works at your end. 

Regards, 

Nevitha