No one ever won a game by resigning

Today I woke up and thought: it’s the end of the GetNoticed contest for me. I resign. A tough night just behind me with my little son, that’s one thing. Furthermore, I’ve got two posts to publish till Wednesday. Although I put some efforts to progress the calendar, it still doesn’t work. My schedule for next couple of days is not promising as well. All in all – 7 weeks of blogging is not a bad score so it’s not a shame, I thought. But then two things happened.

Support

I recently started (again) to play chess. I’ve spent my childhood with my siblings playing this old yet wonderful game. And a few weeks ago I got hooked again – I play each time I have spare 15 minutes during the day (you probably can guess at least one place I do that ( ͡° ͜ʖ ͡°) ). I also ‘liked’ the chess.com profile on my facebook. And that’s what I saw there today’s morning:

No one ever won a game by resigning – Savielly Tartakower

I didn’t tell my wife yet about the decision I made when I woke up, but she probably figured out somehow the thought in my head. She approached me in the kitchen before I said anything and told me: you cannot give up now! We spent so much time on your blog, don’t waste it!

Nice timing! But… don’t you also feel your partner knows too much about you sometimes? 😉

With this two signals I received, I’ve reconsidered my position and I at least let myself give a try to meet this week’s required posts. So!

Progress

Calendar – elementary version

Unless I spent some time on programming the calendar, which is crucial functionality for CodeMate, there’s no any remarkable change I could share with you as with the end user. I decided I just elaborate what I’ve learnt, and what I’m missing.

The basic version of code to launch the calendar is more or less of this shape:

$(document).ready(function () {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev, next today',
                    center: 'title',
                    right: 'month, agendaWeek, agendaDay'
                },
                defaultView: 'agendaWeek',
                editable: true,
                
                allDaySlot: false,
                selectable: true,
                slotMinutes: 15
            });
        });

It renders, but it doesn’t react with any database, services or anything. Just static calendar you can do nothing with.

To see if it can render the sample event and if it works with Ajax I created this test method to feed it with two test events:

private List<CalendarEvent> GetEvents()
        {
            var eventList = new List<CalendarEvent>();

            for (int i = 1; i <= 2; i++)
            {
                CalendarEvent newEvent = new CalendarEvent
                {
                    Id = i.ToString(),
                    Title = $"Event {i}",
                    Start = DateTime.Now.AddDays(i).AddMinutes(i*30).ToString("s"),
                    End = DateTime.Now.AddDays(i).AddMinutes(i*30+30).ToString("s"),                    
                    AllDay = false
                };
                eventList.Add(newEvent);
            }
            
            return eventList;
        }

and shared it by '/Home/GetEvents/'  URL so I could add another property of calendar: events: '/Home/GetEvents/', and  now my calendar shows this:

As you can see it is not ideal because the events are shown at the same time.

I thought maybe it is the fault of passing the date wrong way or so, so I added the ‘click’ handler of the event to the calendar, which looks like:

eventClick: function(calEvent, jsEvent, view) {
                    alert('You clicked on event id: ' +
                        calEvent.Id +
                        "\nStart: " +
                        calEvent.Start +
                        "\nAnd the title is: " +
                        calEvent.Title);
                },

and it showed that properties’ values are OK!

So that’s the area which requires fixing from my side.

Rendering

I’ve noticed FullCalendar doesn’t fit the bootstrap styles nicely – I guess bootstrap cannot determine the size of the calendar properly. That’s the defect:

This is surely CSS thing and has the lowest priority for now – but surely I need to remember about this, as it can’t look like that.

Modal window

I worked with modal window to make adding events possible but looks crappy. I suspect not every bootstrap class is visible – but I may be wrong. The issue to be researched:

Quite a few lines of JS was needed to launch that, so I just show the event I attached to:

dayClick: function (date, allDay, jsEvent, view) {
                    $('#eventTitle').val("");
                    $('#eventDate').val(moment(date, 'DD.MM.YYYY').format('DD-MM-YYYY'));
                    $('#eventTime').val(moment(date, 'DD.MM.YYYY').format('HH:MM'));
                    ShowEventPopup(date);

Database

All information gathered from user needs to be populated into the database. I haven’t started to work in this area yet.

Summary

OK – I think that’s it. As you can see quite a lot work to do yet in here. Unfortunately, I’m not so familiar with JS, Ajax and these frontend things, so it slows me down. But I can see how my knowledge is progressing without a doubt! Each fixed issue gives me another piece of understanding the way these Web things work. Which is the most important here I guess – that’s why I eventually started to work on this project…

Thanks for reading!