Skip to main content

Fullcalendar: How to keep just one event per line horizontally?

I have this calendar, with plugin fullcalendar 6.1.5:

Calendar

I want to show one event per line, horizontally. Example:

If event A starts on the 26th and event B starts on the 27th, event B should be on the bottom row, and so on.

Here is an example of how it should be:

enter image description here

One event per line, regardless of its start and end, only one per line, is it possible?

Here is what i tried:

  1. I tried changing the CSS properties of the events to shift to the bottom, using margin-top: 30px and margin-bottom

  2. I tried to use eventDidMount, eventPositioned, eventRender (some were not supported by the version I use.

  3. I tried to create "invisible" events to try to scroll down

  4. I tried changing the event width to shift all events on the same line down

But nothing worked...

Here is the code:

CDN:

<link href="bower_components/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet"> <script src="bower_components/moment/moment.js"></script> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.5/index.global.min.js'></script>

`

if ($("#calendariotarefas").length) {
                    var tasks = retorno.tasks;
                    var calendar_events = [];
                    
                    tasks.forEach(function (element) {
                      var eventClass      = "";
                      var eventColorClass = element.eventColorClass;
                      var task = {
                        id: element.idtarefa,
                        title: element.title,
                        start: new Date(element.start),
                        end: new Date(element.end),
                        classNames: [eventClass,eventColorClass]
                      }
                      calendar_events.push(task);
                    });
                    
                    var calendarEl = document.getElementById('calendariotarefas');
                    
                    calendar = new FullCalendar.Calendar(calendarEl, {
                      slotEventOverlap: false,
                      initialView: 'dayGridWeek',
                      headerToolbar: {
                        left: 'prev,today,next',
                        center: 'title',
                        right: 'dayGridWeek,dayGridMonth'
                      },
                      buttonText: {
                        today: 'Hoje',
                        month: 'Mês',
                        week: 'Semana'
                      },
                      views: {
                        dayGridWeek: {
                          titleFormat: { year: 'numeric', month: 'long' },
                        }
                      },
                      eventClick: function(info) {
                        modalTarefa( idprojeto, info.event.id, 1 );
                      },
                      stickyFooterScrollbar: true,
                      locale: 'br',
                      displayEventTime: false,
                      events: calendar_events
                    });
                    calendar.render();
                }

`

Some parts of the code are in Portuguese, but I believe that nothing that affects your understanding. Thank you all.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/eqPQ0vr
Labels:

Comments

Post a Comment

Popular posts from this blog

Confusion between commands.Bot and discord.Client | Which one should I use?

Whenever you look at YouTube tutorials or code from this website there is a real variation. Some developers use client = discord.Client(intents=intents) while the others use bot = commands.Bot(command_prefix="something", intents=intents) . Now I know slightly about the difference but I get errors from different places from my code when I use either of them and its confusing. Especially since there has a few changes over the years in discord.py it is hard to find the real difference. I tried sticking to discord.Client then I found that there are more features in commands.Bot . Then I found errors when using commands.Bot . An example of this is: When I try to use commands.Bot client = commands.Bot(command_prefix=">",intents=intents) async def load(): for filename in os.listdir("./Cogs"): if filename.endswith(".py"): client.load_extension(f"Cogs.{filename[:-3]}") The above doesnt giveany response from my Cogs ...
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more