MMRIZE / MMM-CalendarExt3

MagicMirror calendar view module
MIT License
58 stars 22 forks source link

Wrap Text for Event #44

Closed usafa08 closed 1 year ago

usafa08 commented 1 year ago

I haven't been able to identify a way to wrap text for an event within the month view. Is this possible?

Thanks!

eouia commented 1 year ago

Not possible with a simple modification or trick. It is intentionally designed so. If you are a CSS guru, you may find a solution with complex tricks, but it will cause headaches and unexpected design issues. Do you really want to READ THE WHOLE EVENT TITLE which will happen after 3 weeks later? A month view is a kind of summary not for focusing on a specific event. The UI of MagicMirror is supposed to be displayed with limited interfaces.

You'd better keep the month view simply to glance over. For the specific event (probably it will come nearly like today or tomorrow), the default calendar module or MMM-CalendarExt3Agenda would be better for your intention.

To help to look over the monthly summary, you can use other hints like specific colours, and icons, and even you can transform a long title to a shorter and simpler form. For example, you can abbreviate Frank's birthday to 🎂 Frank. It would be more distinguishable and pretty.

usafa08 commented 1 year ago

That makes sense. Thanks for the response and alternate solutions.

On Mon, Nov 21, 2022 at 1:49 PM Seongnoh Sean Yi @.***> wrote:

Not possible with a simple modification or trick. It is intentionally designed so. If you are a CSS guru, you may find a solution with complex tricks, but it will cause headaches and unexpected design issues. Do you really want to READ THE WHOLE EVENT TITLE which will happen after 3 weeks later? A month view is a kind of summary not for focusing on a specific event. The UI of MagicMirror is supposed to be displayed with limited interfaces.

You'd better keep the month view simply to glance over. For the specific event (probably it will come nearly like today or tomorrow), the default calendar module or MMM-CalendarExt3Agenda would be better for your intention.

To help to look over the monthly summary, you can use other hints like specific colours, and icons, and even you can transform a long title to a shorter and simpler form. For example, you can abbreviate Frank's birthday to 🎂 Frank. It would be more distinguishable and pretty.

— Reply to this email directly, view it on GitHub https://github.com/MMRIZE/MMM-CalendarExt3/issues/44#issuecomment-1322502144, or unsubscribe https://github.com/notifications/unsubscribe-auth/A4JHNCPJJQUM3E2BD4LWFEDWJO73DANCNFSM6AAAAAASFVO5H4 . You are receiving this because you authored the thread.Message ID: @.***>

usafa08 commented 1 year ago

I'm just learning how to code so I appreciate your help. I'm trying to do as you suggested and shorten some things or change colors. I've been able to change colors for certain key words so I'm good there. I have NOT been able to replace words in the title string with letter's or symbols. Can you provide an example of how to do that in the eventTransformer portion of the config file? For instance, if I wanted to replace all instances of a name in event titles with just a letter or a shorter name, how would I do that (e.g. "Lauren Dance" becomes "L Dance" or "Daniel Medical" becomes "Dan Medical)? I tried the following but it didn't work:

eventTransformer: (ev) => {
    ev.title.replaceAll('Evelyn','E')
    return ev
},

Additionally, if I wanted to have multiple transformations (e.g. the color AND the name), how would I array both in the config file?

I'm sorry for the basic questions. I really appreciate your help and am enjoying your module.

eouia commented 1 year ago

You almost were there.

eventTransformer: (ev) => {
  ev.title = ev.title.replaceAll('Evelyn', 'E')
  return ev
}

To make bulk conversion;

eventTransformer: (ev) => {
  ev.title = ev.title.replaceAll('Evelyn', 'E')
  ev.title = ev.title.replaceAll('Daniel', 'Dan')
  // or you can chain like this;
  // ev.title = ev.title.replaceAll('Evelyn', 'E')
  //   .replaceAll('Daniel', 'Dan')
  //   .replaceAll('Medical', '🏥')
  return ev
}

Of course, you can make a better approach with some skills like key-value pairs to define words for converting to-from, but unless hundreds of conversions are needed, I think this would be enough. (In that case, tell me again.)

usafa08 commented 1 year ago

Thank you SO much!! This is very helpful.

On Tue, Nov 22, 2022 at 1:44 PM Seongnoh Sean Yi @.***> wrote:

You almost were there.

eventTransformer: (ev) => { ev.title = ev.title.replaceAll('Evelyn', 'E') return ev}

To make bulk conversion;

eventTransformer: (ev) => { ev.title = ev.title.replaceAll('Evelyn', 'E') ev.title = ev.title.replaceAll('Daniel', 'Dan') // or you can chain like this; // ev.title = ev.title.replaceAll('Evelyn', 'E').replaceAll('Daniel', 'Dan')

return ev}

Of course, you can make a better approach with some skills like key-value pairs to define words for converting to-from, but unless hundreds conversion is needed, I think this would be enough. (In that case, tell me again.)

— Reply to this email directly, view it on GitHub https://github.com/MMRIZE/MMM-CalendarExt3/issues/44#issuecomment-1324101532, or unsubscribe https://github.com/notifications/unsubscribe-auth/A4JHNCNMEBZ3UDCCU5B3N4LWJUIBXANCNFSM6AAAAAASFVO5H4 . You are receiving this because you authored the thread.Message ID: @.***>