Page 1 of 1
[VUE 3] Customize event title on print
Posted: Tue May 10, 2022 11:35 am
by luiscloud
On calendar agenda view i have an eventRenderer function to update event rendered title with an event title + link to other page.
When i click on print feature, it print event with custom title with that link, and i need only print the event title.
On calendar config i added this but i dont know how can i do it
listeners: {
beforePrint({ config, printer, source }) {
console.log({ config, printer, source })
},
}
Re: [VUE 3] Customize event title on print
Posted: Tue May 10, 2022 1:07 pm
by alex.l
It's not supported like you described.
You can use CSS to change the appearance of your web page when it's printed on a paper, please check https://www.tutorialspoint.com/css/css_printing.htm
So you need to add @media
rules and CSS class for elements you don't want to be visible while printing.
Re: [VUE 3] Customize event title on print
Posted: Wed May 11, 2022 1:20 pm
by luiscloud
It doesn't work for me
Calendar config:
modes: {
agenda: {
range: 'week',
weekStartDay: 1,
eventRenderer({ eventRecord, renderData }) {
// ADD EVENT ASSOCIATIONS LINKS
let title = eventRecord.name
eventRecord.eventAssociations?.map(v => {
const href = formatAssociationsResourceLink(v?.resourceLink)
title = `${title}<span class="b-cal-event-desc-separator"> - </span><a target="_blank" class="b-cal-event-desc-link" href="${href}">${v?.label}</a>`
})
return title
}
}
},
My css:
<style lang="scss" scoped>
@import '~@bryntum/calendar/calendar.material.css';
@import '../../assets/styles/calendar.material.css';
@media print {
.vue-calendar-container::v-deep .b-cal-event-desc .b-cal-event-desc-link {
visibility: hidden;
}
.vue-calendar-container::v-deep .b-cal-event-desc .b-cal-event-desc-separator {
visibility: hidden;
}
}
Calendar agenda view render fine events with link on title, but continue showing on print
Re: [VUE 3] Customize event title on print
Posted: Wed May 11, 2022 4:01 pm
by Animal
What doesn't work?
I mean the DOM you intend to get into the title gets in there does it?
From that point, what exactly doesn't do what behaviour that you have in mind?
Re: [VUE 3] Customize event title on print
Posted: Wed May 11, 2022 4:44 pm
by luiscloud
I'm trying to use that css to hide the link when I print the agenda view, but it still shows
Re: [VUE 3] Customize event title on print
Posted: Wed May 11, 2022 6:00 pm
by Animal
I just changed the print example here to have this CSSS rule:
@media print {
.not-for-print {
display : none;
}
}
Added a renderer to the month mode:
eventRenderer({ eventRecord, renderData }) {
return `${eventRecord.name}<span class="not-for-print"> <a href="goToJob">Go to job</a></span>`;
}
On screen I see this:
- Screenshot 2022-05-11 at 17.59.38.png (143.28 KiB) Viewed 751 times
Print I see this:
- Screenshot 2022-05-11 at 17.58.54.png (162.89 KiB) Viewed 751 times
Re: [VUE 3] Customize event title on print
Posted: Thu May 12, 2022 10:13 am
by luiscloud
And on agenda view works for you too?
Re: [VUE 3] Customize event title on print
Posted: Thu May 12, 2022 10:48 am
by alex.l
Yes sure.
modes : {
agenda : {
// not-for-print
eventRenderer({ eventRecord, eventData }) {
return `<div>${eventRecord.name}<div/><div class="not-for-print">REMOVE ME</div>`;
}
}
},
Re: [VUE 3] Customize event title on print
Posted: Thu May 12, 2022 10:49 am
by luiscloud
Thanks, I will continue looking for the problem
Re: [VUE 3] Customize event title on print
Posted: Fri May 13, 2022 2:47 pm
by luiscloud
maybe my problem is putting that media inside a scoped css. I try to put it out