Text wrap in calendar

I have just installed the latest version (much better than the previous one I was using from about January this year!!). But I still can’t get my text to wrap, or appear in cute little yellow boxes like the pics show in JED. I’ve looked at all the options in setup but can’t see anything. Am I missing something or is this a CSS tweak after the fact?


Ian Shere

Scheduler has two different rendering modes, so while in week and day views - text are wrapped, in month view text wrap is disabled.

If you have problem with text wrapping even in week|day view - it may be caused by css conflict
Which skin|theme you are using for Joomla?

Ahhhh! So it does!! :smiley: Was expecting to wrap in month view too. I know that having it wrap in monthly view would be a paid with long, or lots of, entries, but could there be an option (checkbox) to enable or disable wrapping in month view in the backend?

It can be done through customization in case of standalone version, we will try to add the same possibility to the next version of plugin as well.

Cool. Can you tell me how to customize it myself for now please? I had a bit of a look through the directory structure of the component, but there are a big bunch of files and I didn’t quite know where to start. I know a very little CSS and PHP, so you’ll probably need to either spell it out to me, or point me to where the wrapping code is already and where to paste it.

Thanks. And thanks for an awesome product! You rock!

js code

schedulre.xy.bar_height = 40; //or any other value

css code

.dhx_cal_event_line{ height:37px; //above value - 7 white-space:normal; }

just add js and css code to the end of

Brilliant solution, it worked, thanks very much! :slight_smile:

One small problem. When there are multiple events in a day, there’s a display problem. The last line of the first entry gets overwritten by the first line of the second entry.

Is there a way around this?

Do you mean day|week view?
In those views, if events has small length ( less than 30 minutes ) - event boxes can overlap ( can be resolved by adjusting “hour-size” in admin’s settings.

As for month view - above lines produces the correct view, where problem doesn’t occur.
( be sure that both code snippets was added and js file is not cached )

Thanks for your reply, Stanislav.

Unfortunately, I’m getting it in month view.

But, yes, as you’ve pointed out, it’s because of time overlaps.

This is the problem:

I need to have month view.
In month view I normally have one event to a date
That one event gets truncated and only the first word or two is visible. The only way around this problem is to show the event as lasting a full 24 hour period. So I can’t set event start and end times :frowning:
That’s not a big problem and I can live with it, but if I am forced to show every event as lasting the whole day (24 hours) then I can’t add another event on that day or it overlaps.

Is there any way around this?

In addition to previous style, try to add

.dhx_cal_event_clear{ height:37px; //above value - 7 white-space:normal; }

And if issue still occurs - can you provide a screenshot of the problem?

I’ve added that, thanks.

Here’s what it looks like now (month view):

The first one is a “five minute event of fun” and the text gets truncated.

The second event, as you can see, displays fine (11th), but that’s because I set it to times 00:00 on one day to 00:00 on the next day. If I set the event to less than 24 hours it becomes like the previous example.

On the 12th, I’ve done two events and they both display properly provided I’ve set them both to 24 hours and keep the text very short. If I add a bit more text it appears like it does in the example on the 13th.

Two problems:

  1. I need to be able to set events to last 2-3 hours but without the text getting truncated and
  2. When there are two events of 2-3 hours, I need the full text of both events to be displayed instead of overlapping.

Thanks in advance.

Have you added the next code?

<script> schedulre.xy.bar_height = 40; </script>

Hi, yes, I added the two codes to the end of
respectively. That was prior to making my last post.

BTW, I didn’t add the opening and closing tags to the js file. I simply added the code provided to the end of the file as described originally. The end of the js file now looks like this:

scheduler.form_blocks.select.set_value=function(B,C,A){if(typeof C=="undefined"||C===""){C=(B.firstChild.options[0]||{}).value}B.firstChild.value=C||""}; schedulre.xy.bar_height = 40; //or any other value

It seems the original code snippet has a typo, which is the reason of the problem.
The code need to be

scheduler.xy.bar_height = 40; //scheduler , not the schedulre

Brilliant, thanks :slight_smile:

That does sort out the overlapping problem.

Any suggestions for the first problem (on the 11th in my screenshot)? I’d like the flexibility of being able to set a start and end time for the event without the text scrolling off the screen. At the moment all events have to be set as 24 hour events or they get truncated.

The only difference between events which are take full date and times ones - in name of css class, so if you want to affect both , add 2 css classes with custom height , as

.dhx_cal_event_line{ //full day events
    height:37px; //above value - 7
.dhx_cal_event_clear{ //timed events
    height:37px; //above value - 7

I added that entire code to the end of dhtmlxscheduler.css

Is that what I was supposed to do?

It doesn’t seem to have made a difference to the text getting truncated unfortunately.

Replace it with next one

.dhx_cal_event_line{ height:37px; white-space:normal; } .dhx_cal_event_clear{ height:37px; white-space:normal; }

Sorry for inconvenience, the comments in previous code snippet were invalid for css

I’m sorry to be a pain, but no that hasn’t changed anything :frowning:

PS: I also sent you a PM about this with a link to the site just in case that sparks any ideas.