Our powerful JS Calendar component


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

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

All the best,
Alex


Post 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


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


Post by luiscloud »

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


Post 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 749 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 749 times

Post by luiscloud »

And on agenda view works for you too?


Post 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>`;
        }
    }
},
Attachments
Screenshot 2022-05-12 at 16.47.34.png
Screenshot 2022-05-12 at 16.47.34.png (326.36 KiB) Viewed 743 times
Screenshot 2022-05-12 at 16.47.48.png
Screenshot 2022-05-12 at 16.47.48.png (367.02 KiB) Viewed 743 times

All the best,
Alex


Post by luiscloud »

Thanks, I will continue looking for the problem


Post by luiscloud »

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


Post Reply