Add setting for first day of the week

app/assets/javascripts/due_date_select.js

@@ -64,6 +64,7 @@ class DueDateSelect {
           this.saveDueDate(true);
         }
       },
+      firstDay: gon.first_day_of_week,
     });
 
     calendar.setDate(parsePikadayDate($dueDateInput.val()));
@@ -183,6 +184,7 @@ export default class DueDateSelectors {
         onSelect(dateText) {
           $datePicker.val(calendar.toString(dateText));
         },
+        firstDay: gon.first_day_of_week,
       });
 
       calendar.setDate(parsePikadayDate(datePickerVal));

app/assets/javascripts/issuable_form.js

@@ -46,6 +46,7 @@ export default class IssuableForm {
         parse: dateString => parsePikadayDate(dateString),
         toString: date => pikadayToString(date),
         onSelect: dateText => $issuableDueDate.val(calendar.toString(dateText)),
+        firstDay: gon.first_day_of_week,
       });
       calendar.setDate(parsePikadayDate($issuableDueDate.val()));
     }

app/assets/javascripts/member_expiration_date.js

@@ -33,6 +33,7 @@ export default function memberExpirationDate(selector = '.js-access-expiration-d
 
         toggleClearInput.call($input);
       },
+      firstDay: gon.first_day_of_week,
     });
 
     calendar.setDate(parsePikadayDate($input.val()));

app/assets/javascripts/pages/projects/graphs/charts/index.js

@@ -43,10 +43,26 @@ document.addEventListener('DOMContentLoaded', () => {
     ],
   });
 
+  const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
+    if (firstDayOfWeek === 0) {
+      return weekDays;
+    }
+
+    return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
+      const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
+
+      return {
+        ...acc,
+        [reorderedDayName]: weekDays[reorderedDayName],
+      };
+    }, {});
+  };
+
   const hourData = chartData(projectChartData.hour);
   responsiveChart($('#hour-chart'), hourData);
 
-  const dayData = chartData(projectChartData.weekDays);
+  const weekDays = reorderWeekDays(projectChartData.weekDays, gon.first_day_of_week);
+  const dayData = chartData(weekDays);
   responsiveChart($('#weekday-chart'), dayData);
 
   const monthData = chartData(projectChartData.month);

app/assets/javascripts/pages/users/activity_calendar.js

@@ -159,7 +159,7 @@ export default class ActivityCalendar {
       .append('g')
       .attr('transform', (group, i) => {
         _.each(group, (stamp, a) => {
-          if (a === 0 && stamp.day === 0) {
+          if (a === 0 && stamp.day === this.firstDayOfWeek) {
             const month = stamp.date.getMonth();
             const x = this.daySizeWithSpace * i + 1 + this.daySizeWithSpace;
             const lastMonth = _.last(this.months);
@@ -205,6 +205,14 @@ export default class ActivityCalendar {
         y: 29 + this.dayYPos(5),
       },
     ];
+
+    if (this.firstDayOfWeek === 1) {
+      days.push({
+        text: 'S',
+        y: 29 + this.dayYPos(7),
+      });
+    }
+
     this.svg
       .append('g')
       .selectAll('text')

app/assets/javascripts/pages/users/user_tabs.js

@@ -234,7 +234,7 @@ export default class UserTabs {
       data,
       calendarActivitiesPath,
       utcOffset,
-      0,
+      gon.first_day_of_week,
       monthsAgo,
     );
   }

app/assets/javascripts/vue_shared/components/pikaday.vue

@@ -40,6 +40,7 @@ export default {
       toString: date => pikadayToString(date),
       onSelect: this.selected.bind(this),
       onClose: this.toggled.bind(this),
+      firstDay: gon.first_day_of_week,
     });
 
     this.$el.append(this.calendar.el);

app/controllers/profiles/preferences_controller.rb

@@ -37,7 +37,7 @@ class Profiles::PreferencesController < Profiles::ApplicationController
   end
 
   def preferences_param_names
-    [:color_scheme_id, :layout, :dashboard, :project_view, :theme_id]
+    [:color_scheme_id, :layout, :dashboard, :project_view, :theme_id, :first_day_of_week]
   end
 end
 

app/helpers/application_settings_helper.rb

@@ -136,6 +136,7 @@ module ApplicationSettingsHelper
       :container_registry_token_expire_delay,
       :default_artifacts_expire_in,
       :default_branch_protection,
+      :default_first_day_of_week,
       :default_group_visibility,
       :default_project_visibility,
       :default_projects_limit,

app/helpers/preferences_helper.rb

@@ -43,6 +43,13 @@ module PreferencesHelper
     ]
   end
 
+  def first_day_of_week_choices
+    [
+      ['Sunday', 0],
+      ['Monday', 1]
+    ]
+  end
+
   def user_application_theme
     @user_application_theme ||= Gitlab::Themes.for_user(current_user).css_class
   end

app/models/application_setting.rb

@@ -241,6 +241,7 @@ class ApplicationSetting < ActiveRecord::Base
       container_registry_token_expire_delay: 5,
       default_artifacts_expire_in: '30 days',
       default_branch_protection: Settings.gitlab['default_branch_protection'],
+      default_first_day_of_week: 0,
       default_group_visibility: Settings.gitlab.default_projects_features['visibility_level'],
       default_project_visibility: Settings.gitlab.default_projects_features['visibility_level'],
       default_projects_limit: Settings.gitlab['default_projects_limit'],

app/models/user.rb

@@ -228,6 +228,9 @@ class User < ApplicationRecord
   delegate :path, to: :namespace, allow_nil: true, prefix: true
   delegate :notes_filter_for, to: :user_preference
   delegate :set_notes_filter, to: :user_preference
+  delegate :first_day_of_week, :first_day_of_week=, to: :user_preference
+
+  accepts_nested_attributes_for :user_preference, update_only: true
 
   state_machine :state, initial: :active do
     event :block do

app/views/admin/application_settings/_localization.html.haml

+= form_for @application_setting, url: admin_application_settings_path(anchor: 'js-localization-settings'), html: { class: 'fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :default_first_day_of_week, _('Default first day of the week'), class: 'label-bold'
+      = f.select :default_first_day_of_week, options_for_select({_('Sunday') => 0, _('Monday') => 1}, @application_setting.default_first_day_of_week), {}, class: 'form-control'
+      .form-text.text-muted
+        Default first day of the week in calendars and date pickers.
+
+  = f.submit 'Save changes', class: "btn btn-success"

app/views/admin/application_settings/preferences.html.haml

@@ -56,3 +56,14 @@
       = _('Configure Gitaly timeouts.')
   .settings-content
     = render 'gitaly'
+
+%section.settings.as-localization.no-animate#js-localization-settings{ class: ('expanded' if expanded_by_default?) }
+  .settings-header
+    %h4
+      = _('Localization')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded_by_default? ? _('Collapse') : _('Expand')
+    %p
+      = _('Various localization settings.')
+  .settings-content
+    = render 'localization'

app/views/profiles/preferences/show.html.haml

@@ -60,5 +60,23 @@
       = f.select :project_view, project_view_choices, {}, class: 'form-control'
       .form-text.text-muted
         Choose what content you want to see on a project’s overview page.
+
+  .col-sm-12
+    %hr
+
+  .col-lg-4.profile-settings-sidebar
+    %h4.prepend-top-0
+      Localization
+    %p
+      Customize language and region related settings.
+      = succeed '.' do
+        = link_to 'Learn more', help_page_path('user/profile/preferences', anchor: 'localization'), target: '_blank'
+  .col-lg-8
+    .form-group
+      = f.label :first_day_of_week, class: 'label-bold' do
+        First day of the week
+      = f.select :first_day_of_week, options_for_select(first_day_of_week_choices, @user.first_day_of_week || Gitlab::CurrentSettings.default_first_day_of_week), {}, class: 'form-control'
+      .form-text.text-muted
+        Choose on what day the week should start.
     .form-group
       = f.submit 'Save changes', class: 'btn btn-success'

changelogs/unreleased/2105-add-setting-for-first-day-of-the-week.yml

+---
+title: Add setting for first day of the week
+merge_request: 22755
+author: Fabian Schneider @fabsrc
+type: added

db/migrate/20181027114222_add_first_day_of_week_to_user_preferences.rb

+# frozen_string_literal: true
+
+class AddFirstDayOfWeekToUserPreferences < ActiveRecord::Migration
+  DOWNTIME = false
+
+  def change
+    add_column :user_preferences, :first_day_of_week, :integer
+  end
+end

db/migrate/20181028120717_add_default_first_day_of_week_to_application_settings.rb

+# frozen_string_literal: true
+
+class AddDefaultFirstDayOfWeekToApplicationSettings < ActiveRecord::Migration
+  include Gitlab::Database::MigrationHelpers
+  disable_ddl_transaction!
+
+  DOWNTIME = false
+
+  def up
+    add_column_with_default(:application_settings, :default_first_day_of_week, :integer, default: 0)
+  end
+
+  def down
+    remove_column(:application_settings, :default_first_day_of_week)
+  end
+end

doc/user/profile/preferences.md

@@ -90,3 +90,11 @@ You can choose between 3 options:
 - Files and Readme (default)
 - Readme
 - Activity
+
+## Localization
+
+This following setting allows you to customize calendar layouts.
+
+### First day of the week
+
+You can choose between **Sunday** and **Monday** for the first day of the week. This will be used for all calendar views and datepickers.

lib/gitlab/gon_helper.rb

@@ -24,12 +24,14 @@ module Gitlab
       gon.emoji_sprites_css_path = ActionController::Base.helpers.stylesheet_path('emoji_sprites')
       gon.test_env               = Rails.env.test?
       gon.suggested_label_colors = LabelsHelper.suggested_colors
+      gon.first_day_of_week      = Gitlab::CurrentSettings.default_first_day_of_week
 
       if current_user
         gon.current_user_id = current_user.id
         gon.current_username = current_user.username
         gon.current_user_fullname = current_user.name
         gon.current_user_avatar_url = current_user.avatar_url
+        gon.first_day_of_week = current_user.first_day_of_week if current_user.first_day_of_week
       end
     end
 

spec/controllers/profiles/preferences_controller_spec.rb

@@ -42,7 +42,8 @@ describe Profiles::PreferencesController do
         prefs = {
           color_scheme_id: '1',
           dashboard: 'stars',
-          theme_id: '2'
+          theme_id: '2',
+          first_day_of_week: '1'
         }.with_indifferent_access
 
         expect(user).to receive(:assign_attributes).with(ActionController::Parameters.new(prefs).permit!)