Our powerful JS Calendar component
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 })
},
}
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.
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
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?
I'm trying to use that css to hide the link when I print the agenda view, but it still shows
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 770 times
Print I see this:
- Screenshot 2022-05-11 at 17.58.54.png (162.89 KiB) Viewed 770 times
And on agenda view works for you too?
Yes sure.
modes : {
agenda : {
// not-for-print
eventRenderer({ eventRecord, eventData }) {
return `<div>${eventRecord.name}<div/><div class="not-for-print">REMOVE ME</div>`;
}
}
},
-
Attachments
-
- Screenshot 2022-05-12 at 16.47.34.png (326.36 KiB) Viewed 764 times
-
- Screenshot 2022-05-12 at 16.47.48.png (367.02 KiB) Viewed 764 times
Thanks, I will continue looking for the problem
maybe my problem is putting that media inside a scoped css. I try to put it out