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