[VUE 3] Customize event title on print

[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 })
        },
      }

[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.

[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

[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?

[luiscloud]

I'm trying to use that css to hide the link when I print the agenda view, but it still shows

[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.29 KiB) Viewed 273 times

Print I see this:

Screenshot 2022-05-11 at 17.58.54.png (162.9 KiB) Viewed 273 times

[luiscloud]

And on agenda view works for you too?

[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>`;
        }
    }
},

[luiscloud]

Thanks, I will continue looking for the problem

[luiscloud]

maybe my problem is putting that media inside a scoped css. I try to put it out